我正在从表单组件获取数据,并尝试使用此数据设置应用程序组件的状态。
但是,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;
setState()是React中的异步调用。因此,您不太可能在下一行获得更新的状态值。要在状态更新成功后检查更新后的值,可以签入回调处理程序。
setState()
改变这个
onSubmit = (model) => { console.log("Outer", model); this.setState({ data: model }); console.log("Form: ", this.state); }
至
onSubmit = (model) => { console.log("Outer", model); this.setState({ data: model }, () => { console.log("Form: ", this.state); }); }