如何在多个文件中分解 REACTJS 中的 Axios 调用？

Posted 2023-02-22

【中文标题】如何在多个文件中分解 REACTJS 中的 Axios 调用？

【英文标题】：How to break up an Axios call in REACTJS in multiple files?

【发布时间】：2019-11-12 06:37:15

【问题描述】：

我的项目正在多个文件中进行 Axios 调用，我想对其进行调制并将调用作为道具传递给需要它的其他文件。

这是我的 componentDidMount() 方法，它有调用：

 componentDidMount () 
 document.body.style = 'background: #b8bab2;'
// Retrieve projects data
 axios.get('/env?var=READER_HOSTNAME').then(response => 
  return axios.get(`$response.data.var/graphql?query=$queries.allProjects()`)
 ).then(response => 
  this.setState(
    projects: response.data.data.projects,
    visible: response.data.data.projects,
    isLoaded: true
  )
 )

【参考方案1】：

您可以创建一个higher order component。

import React,  Component  from 'react'

export default withData = MyComponent => 
  return class MyComponentWithData extends Component 
    state =  projects: null, visible: null, isLoaded: false 

    componentDidMount() 
      // Retrieve projects data
      axios.get('/env?var=READER_HOSTNAME')
        .then(response => 
          return axios.get(`$response.data.var/graphql?query=$queries.allProjects()`)
        ).then(response => 
          const  projects  = response.data.data
          this.setState(
            projects,
            visible: projects,
            isLoaded: true
          )
        )
    

    render() 
      const  projects, visible, isLoaded  = this.state
      if (!isLoaded) 
        return null
      
      return (
        <MyComponent
          ...this.props
          projects=projects
          visible=visible
          isLoaded=isLoaded
        />
      )
    
  

将withData 导入到您要使用的组件中，如下所示：

class SomeComponent extends Component 
  // ... component code

export default withData(SomeComponent)