Reactjs 调用this.setState后状态未更改

我正在从我的表单组件获取数据，并尝试使用此数据设置我的应用程序组件的状态

但是，state.data是空对象，不更新数据。在设置模型数据以检查其是否存在之前，我先将其记录在控制台日志中。它们是模型中的数据

import React, { Component, Fragment } from "react";
import Form from "../components/Form";

import product from "./product.json";

class App extends Component {

    constructor() {
        super();  

        this.state = {
            data: {}
        };

    }

    onSubmit = (model) => {

        console.log("Outer", model);

        this.setState({
            data: model
        });

        console.log("Form: ", this.state);
    }
    render() {

        const fields = product.fields;

        return (
            <Fragment>
                <div>Header</div>
                <Form
                    model={fields}
                    onSubmit={(model) => {this.onSubmit(model);}}
                />
                <div>Footer</div>
            </Fragment>
        );
    }
}

export default App;

import React，{Component，Fragment}来自“React”；
从“./组件/表格”导入表格；
从“/product.json”导入产品；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
数据：{}
};
}
onSubmit=（模型）=>{
控制台日志（“外部”，型号）；
这是我的国家({
数据：模型
});
log（“表单：，this.state”）；
}
render（）{
常量字段=product.fields；
返回(
标题
{this.onSubmit（model）；}
/>
页脚
);
}
}
导出默认应用程序；

setState（）

是React中的异步调用。因此，您不太可能在下一行中获得更新的状态值。要在状态更新成功时检查更新的值，可以签入回调处理程序

改变这个

onSubmit = (model) => {
  console.log("Outer", model);
  this.setState({
    data: model
  });
  console.log("Form: ", this.state);
}

到

---

我只想补充一点，如果你这样做是行不通的：

this.setState({things} , console.log(this.state))

---

您必须将重构传递给回调，而不是可导出代码本身。如果不这样做，函数将在状态更新之前启动，即使您会看到日志。

根据

react

文档，

setState

是一个异步调用。您可以通过以下两种方式确保您的状态已更新以执行特定操作：

您可以向setState传递一个包含当前状态和道具的函数，返回的值将是组件的下一个状态。 请记住以下几点：

状态是对更改发生时组件状态的引用 正在应用。它不应该直接变异。取而代之的是变化 应通过基于来自的输入构建新对象来表示 状态和道具

以下是一个例子：

 this.setState((state, props) => {
      //do something
      return {counter: state.counter + props.step};
    });

您可以将回调传递给

setState

函数，如Dinesh的 回答。状态更新成功后，将执行回调，从而确保在回调中具有更新的状态

以下是一个例子：

this.setState({ ...new state }, () => {
 // do something
});

---

希望有帮助。

我确实认为

this.setState

不一定是同步的，所以您的

console.log（“表单：”，this.state）可能太早打电话了。另见。我希望您可以在
render（）
内查询
this.state
，但不能在调用
this.setState（）
后直接查询。关于表格，我希望你能成功。@UweKeim真的吗？因为在onSubmit按钮中，我想将此数据发布到服务器。可能是@Kay的重复，您需要
console.log（）
您的
状态
对象，并查看其中的属性。不知何故，
model
似乎并不正确，但您可以通过这种方式进行检查，或者与我们分享控制台中有关您的
状态
对象的信息。是否可以使用async并在此处等待？我在寻找最佳实践最佳实践将使用这些选项中的任何一个。在setState上使用async await可能会导致应用程序负载沉重，也可能导致速度缓慢。
this.setState({ ...new state }, () => {
 // do something
});