Javascript ReactJS-State对象属性在setState之后为null

我对React比较陌生，我正在用它构建一个新的应用程序。我现在的主要问题是，我有一个具有某些属性的状态。基于onchange属性，我更改状态属性。之后，当我提交表单时，我尝试将一个对象从state分配给一个特定属性，我将从数组上的find方法接收该属性

所以我有一个状态。我复印了一份。之后，我执行find方法并将从中获得的对象存储在一个变量中。然后我将该对象指定给我所在州的特定属性icecream。最后，我用我的新状态NewState设置了状态

主要的问题是，在提交表单之后，我分配给对象的icecream属性返回null。真的很奇怪，因为如果我只使用newState变量的变量执行console.log，它将返回一个对象而不是null。当I console.log返回null时，表单也将使用null属性提交。我的React-dev工具说，icecream属性实际上是填充的，而不是空的

我的代码

constructor(props) {
    super(props);

    this.state = {
        Order: {
            quantity: null,
            name: '',
            email: '',
            icecream_id: 1,
            icecream: null
        }
    }

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInput = this.handleInput.bind(this);
    this.getIcecream = this.getIcecream.bind(this);

}

handleInput(key, e) {
    //Get a copy of the current state
    var state = Object.assign({}, this.state.Order);

    //apply for each key the new value
    state[key] = e.target.value;

    //Set the state by the new changes
    this.setState({ Order: state });
}

getIcecream(e) {

    e.preventDefault();

    //Get another copy of the new state
    var newState = Object.assign({}, this.state.Order);

    ///Find the icecream object based on the selected icecream
    var object = this.props.icecreams.find((item) => item.id == this.state.Order.icecream_id);

    //Set the icecream with the founded object
    newState.icecream = object;

    //Set the new state
    this.setState({ Order: newState });

    console.log(newState);
    console.log(this.state.Order);

}

handleSubmit() {

    if (isNaN(this.state.Order.quantity)) {

        alert('Quantity is not a number');

    } else {

        this.props.addOrder(this.state.Order);

        this.setState({ Order: { name: '', email: '', quantity: 0, icecream_id: 0, icecream: null } });

        //this will work for now
        this.props.history.push('/home/orders');


     }

}

HTML/JSX

    <form onSubmit={this.getIcecream}>

        <div className="card card-default">
            <div className="card-header">Add a custom order</div>

            <div className="card-body table-responsive">

                <div className="form-row">
                    <div className="col">
                        <label>Name customer</label>
                        <input type="text" className="form-control" placeholder="Name customer" onChange={(e) => this.handleInput('name', e)} required />
                    </div>
                    <div className="col">
                        <label>E-mail customer</label>
                        <input type="email" className="form-control" placeholder="E-mail customer" onChange={(e) => this.handleInput('email', e)} required />
                    </div>
                </div>

                <div className="form-row mt-3">
                    <div className="col">
                        <label>Quantity (liters)</label>
                        <input type="number" className="form-control" placeholder="1" min="1" onChange={(e) => this.handleInput('quantity', e)} required />
                    </div>
                    <div className="col">
                        <label>Select icecream</label>
                        <select className="form-control" value={this.state.Order.icecream_id} onChange={(e) => this.handleInput('icecream_id', e)}>

                            {this.props.icecreams.map((item) => {
                                return <option value={item.id} key={item.id}>{item.title} ({item.id})</option>
                            })}
                        </select>
                    </div>
                </div>

            </div>
        </div>

        <button type="submit" className="custom-button mt-20">Add order</button>

    </form>

Console.log

---

我缺少什么吗？

函数setState是异步的。如果你不知道这意味着什么，基本上它会要求js做一些事情，但我们真的不知道什么时候会这样做。但是，js仍然运行代码的下一部分。所以当你这么做的时候

this.setState({ Order: newState });

console.log(newState);
console.log(this.state.Order);

这个.state.Order还没有改变。但是，setState是重载的，您可以使用如下两个参数调用它

this.setState({ Order: newState }, 
    ()=>{console.log(this.state.Order}
);

---

这将确保在设置状态后完成控制台日志。

好的，我会检查它。我已经认为是这样的，所以我在考虑使用承诺之类的东西。不过你现在的状态应该很好，没有必要改变这个。由于setState的异步特性，只有console.log使您无法使用。