gpt4 book ai didi

reactjs - 调用 this.setState 后状态没有改变

转载 作者:行者123 更新时间:2023-12-03 13:57:05 25 4
gpt4 key购买 nike

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

但是,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 中的异步调用。因此您不太可能在下一行中获得更新的状态值。要检查状态更新成功后的更新值,您可以 checkin 回调处理程序。

改变这个

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);
});
}

关于reactjs - 调用 this.setState 后状态没有改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53469189/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com