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

【问题标题】：How to break up an Axios call in REACTJS in multiple files?如何在多个文件中分解 REACTJS 中的 Axios 调用？
【发布时间】：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
  })
 })
}

【问题讨论】：

标签： javascript reactjs react-native axios

【解决方案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)

【讨论】：