ReactJS - setState

Question

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

所以我有一个州。我复制了这个。之后，我执行find方法并将我从中获取的对象存储在变量中。然后我将该对象分配给我所在州的特定属性（冰淇淋）。最后，我使用新状态（NewState）设置状态。

主要问题是，在提交表单后，我将对象分配的属性（icecream）返回null。真的很奇怪，因为如果我只用newState变量的变量做console.log，它返回一个对象而不是null。当我console.log状态时它返回null，因此，表单也将以null属性提交。我的React dev工具说，属性（冰淇淋）实际上是填充的而不是空的。

我的代码

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

我有什么遗失的吗？

Answer 1

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

this.setState({ Order: newState });

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

this.state.Order尚未改变。但是，setState被重载，您可以使用2个参数调用它，例如

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

这确保控制台日志在setState之后完成。