javascript - this.setState 不会更新用户对象中的嵌套数组，但是当 console.loging 相同的逻辑时，它返回一个看起来正确的对象

Question

因此，用户可以选择一堆餐食。我在用户对象内有一个对象数组来存储食物。

用户选择一些餐食并单击提交后，我使用 setState 尝试更新用户餐食，我是这样做的。

submitAllMeals(arrayOfMeals) {
    this.setState({
        user: {
            ...this.state.user,
            meals: [...this.state.user.meals, ...arrayOfMeals]
        }
    });

    console.log({
        user: {
            ...this.state.user,
            meals: [...this.state.user.meals, ...arrayOfMeals]
        }
    });

    axios
        .put('http://localhost:5000/getuserdata', {
            userdata: this.state.user
        })
        .then(response => {
            console.log(response);
        });
}

奇怪的是，餐食并没有添加到状态下的用户对象中，但是下面的控制台日志记录了正确的输出。

即使创建新对象的逻辑是正确的，我的状态没有更新是否有原因？如果是这样，有人知道为什么吗？

Answer 1

<小时/>

React 的 setState 是异步的，这意味着 this.state 可能会在您使用组件的内部状态后更新。您必须将其视为请求 - 它不会立即发生。

在您发出 axios 请求时，您仍然无法确定是否拥有 this.state.user。

要解决这个问题，您可以使用回调。 setState 的第二个参数接收回调，因此您可以执行使用更新状态的 axios 请求，例如:

this.setState({
    user: {}
}, () => {
    // your request that uses the updated this.state.user
});

setState() 文档:https://reactjs.org/docs/react-component.html#setstate