componentWillMount() は廃止されたため、 componentDidMount() で HTTP リクエストを作成し、レスポンスに従って状態を更新しています。componentDidMount() は render() メソッドの後に実行されますが、componentDidMount で this.setState() を使用すると、render メソッドを再度呼び出す必要があります。そのため、状態のエラー プロパティに条件付きで依存するモーダル コンポーネントは、リクエストにエラーがある場合に再レンダリングする必要があります。しかし、状態が変化していないため、Modal コンポーネントがレンダリングされません。誰か助けてくれませんか??
const withErrorHandler = (WrappedComponent, axios) => {
return class extends Component {
state = {
error: null
}
componentDidMount () {
axios.interceptors.request.use(req => {
this.setState({
error: null
});
return req;
});
axios.interceptors.response.use(res => res, error => {
this.setState({
error: error
});
});
}
errorConfirmedHandler = () => {
this.setState({
error: null
});
}
render() {
return (
<Aux>
<Modal show={this.state.error} modalClosed={this.errorConfirmedHandler}>
{this.state.error ? this.state.error.message : null}
</Modal>
<WrappedComponent {...this.props} />
</Aux>
);
}
}
}