Javascript 只能更新已安装或正在安装的组件。无鳍错误

注意：发现此问题比其他问题更难。我知道有人在我面前问过这个问题，但我需要帮助

这三天来我一直在收到这个错误，但我不知道这个错误。即使我搜索了很多，检查了原始代码，但什么也没发生

`proxyConsole.js:56 Warning: Can only update a mounted or mounting 
 component. This usually means you called setState, replaceState, or 
 forceUpdate on an unmounted component. This is a no-op.

Please check the code for the _class2 component.`

ContactData.js，我相信这里发生了错误，因为当我触发按钮时，我得到了它

    import React, { Component } from 'react';

import Button from '../../../components/UI/Button/Button';
import axios from '../../../axios-orders';
import classes from './ContactData.css';
import Spinner from '../../../components/UI/Spinner/Spinner';


class ContactData extends Component {

    state = {
        loading: false
    }

    orderHandler = (event) => {

        event.preventDefault();

        // e.preventDefault();
        this.setState( { loading: true } );

        const order = {
            // ingredients: this.props.ingredients,
            // price: this.props.price,
            // // customer: {
            // //     name: 'Max Schwarzmüller',
            // //     address: {
            // //         street: 'Teststreet 1',
            // //         zipCode: '41351',
            // //         country: 'Germany'
            // //     },
            // //     email: 'test@test.com'
            // // },
            // deliveryMethod: 'fastest'
        }
        axios.post( '/orders.json', order )
            .then( response => {
                this.setState( { loading: false } );
                this.props.history.push('/');

            } )
            .catch( error => {
                this.setState( { loading: false } );
                this.props.history.push('/');

            } );
            console.log('9')

    }

    render() {
        console.log(this.state);

        let form = <Spinner />

        if( !this.state.loading )
        {
            form = (
                <form>
                    <input type="text" placeholder="Enter Your Name" />
                    <input type="text" placeholder="Enter Your Name" />
                    <input type="text" placeholder="Enter Your Name" />
                    <input type="text" placeholder="Enter Your Name" />
                    <input type="text" placeholder="Enter Your Name" />
                    <Button btnType="Success" clicked={this.orderHandler}>Order</Button>
                </form>
            );
        }
        console.log('10')


        return (
            <div className={classes.Contact_data}>
                <h1> Your Contact Data !</h1>
                {form}
            </div>
        );
    }
}

export default ContactData;

import React，{Component}来自'React'；
从“../../../components/UI/Button/Button”导入按钮；
从“../../../axios订单”导入axios；
从“/ContactData.css”导入类；
从“../../../components/UI/Spinner/Spinner”导入微调器；
类ContactData扩展组件{
状态={
加载：错误
}
orderHandler=（事件）=>{
event.preventDefault（）；
//e.预防违约（）；
this.setState（{loading:true}）；
常量顺序={
//成分：这个。道具。成分，
//价格：这个。道具。价格，
////客户：{
////名称：“Max Schwarzmüller”，
////地址：{
////街道：“Teststreet 1”，
////zipCode:'41351'，
////国家：'德国'
// //     },
////电子邮件：'test@test.com'
// // },
//交货方式：“最快”
}
post（'/orders.json'，order）
。然后（响应=>{
this.setState（{loading:false}）；
this.props.history.push（'/'）；
} )
.catch（错误=>{
this.setState（{loading:false}）；
this.props.history.push（'/'）；
} );
console.log（'9'）
}
render（）{
console.log（this.state）；
设形式=
如果（！this.state.loading）
{
表格=(
命令
);
}
console.log（'10'）
返回(
你的联系方式！
{form}
);
}
}
导出默认联系人数据；

---

整个Repo上传到此处

在组件中调用

setState（）

时会发生这种情况，即使该组件由于导航离开组件而已卸载，在这种情况下，

history.push（'/'）

在调用

setState（）

之前，可以添加一个

isMounted

检查，如下所示：

class ContactData extends Component {
  _isMounted = false;
  orderHandler = (event) => {
    .then( response => {
      // add check here
      if (this._isMounted) {
        this.setState( { loading: false } );
      }
      this.props.history.push('/');
    }

  componentDidmount() {
    this._isMounted = true
  }
  componentWillUnmount() {
    this._isMounted = false;
  }
  ...
  ...
}

---

没有帮助这个方法，这看起来像是一个挑战！嗨，我刚刚编辑了代码片段。只需尝试一下更新的代码片段。在ComponentDidMount中，isMounted将以相同的行为设置为true。你能在这里玩代码吗