Передача функции из HOC в обернутый компонент приводит к бесконечному циклу

Я хочу сделать HOC с обработчиком axios, поэтому мне не нужно обрабатывать все возможные отзывы из ответа (404200401, ответ и т. Д.)

вот мой 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
    )
  }
})

но я получил бесконечный цикл от console.log в async makeRequest() функция в HOC,

как мне этого избежать и просто позволить HOC позвонить makeRequest() один раз?

мне нужно обрабатывать HOC, чтобы иметь ability нравиться:

  1. Вызовите HOC, когда смонтировали, если axios метод get
  2. Позвонить в HOC из onPress событие, если метод post

0 ответов

Другие вопросы по тегам