0

我想用 axios 处理程序制作 HOC，所以我不需要处理来自响应的所有可能的反馈（404,200,401，响应等）

这是我的withFetchingAxios：

export default (Component)=> class extends React.PureComponent{

  constructor(props) {
    super(props);
    this.state = {
      response:null,
      error:'',
      isLoading:false
    };
    this.makeRequest = this.makeRequest.bind(this);
}

  async makeRequest({method='get', url, data=null, config=null}){
    console.log(method , url, data, config)
    try {
      this.setState({isLoading:true})
      AxiosInstance[method](url, JSON.parse(config), JSON.parse(data))
      .then((res) => {
        this.setState({response:res.data})
      })
      .catch((err) => {
        this.setState({error:err})
      })
      .finally(() => {
        this.setState({isLoading:false})
      });
    } catch (err) {
      console.log('err withFetchingAxios' , err)
      this.setState({error:err, isLoading:false})
    }
  }

  render(){
    if(this.state.isLoading){
      return(
        //show loader component
      )
    } // else if error show component error,
    return(
      <Component
        {...this.props}
        response={this.state.response}
        makeRequest={({method='get', url, data, config})=>this.makeRequest({method, url, data, config})}
      />
    )
  }
}

我只是在我的其他组件中使用它，例如Home：

export default withFetchingAxios(class Home extends React.Component{

  /**
  * List function to handling component
  */

  componentDidMount(){
    this.props.makeRequest({url:'posts'})
  }

  /**
  * List function to render component
  */

  /**
  * End list function to render component
  */

  render() {
    return(
      //Home UI
    )
  }
})

但我从HOCconsole.log的函数中得到了无限循环，async makeRequest()

我如何避免它，只让 HOC 调用makeRequest()一次？

我需要处理 HOC 才能获得ability类似：

  1. axios如果方法是，则在 didmount 时调用 HOCget
  2. onPress如果方法是，则从事件调用 HOCpost
4

0 回答 0