小编典典

调用this.setState后状态不变

reactjs

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

但是,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;

阅读 377

收藏
2020-07-22

共1个答案

小编典典

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

改变这个

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);
  });
}
2020-07-22