Передача функции из 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
нравиться:
- Вызовите HOC, когда смонтировали, если
axios
методget
- Позвонить в HOC из
onPress
событие, если методpost