0

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>
            );
        }
    }
}
4

0 に答える 0