ReactJS在子组件内部两次调用函数，两次设置父状态失败

Question

我遇到一个问题，我想用componentDidMount()上的默认值保存特定字段集的数据。

从子组件发送数据后，数据将保存在父组件中。然而，由于React的setState((是异步的，它只保存其中一个字段的数据。我在下面概述了我的问题的一个基本版本。你知道我该怎么解决这个问题吗？

// Parent Component
class Form extends Component {
super(props);
this.manageData = this.manageData.bind(this);
this.state = {
formData: {}
}
}

manageData(data) {
var newObj = {
[data.name]: data.value
}
var currentState = this.state.formData;
var newState = Object.assign({}, currentState, newObj);
this.setState({
formData: newState, // This only sets ONE of the fields from ChildComponent because React delays the setting of state.
)};
render() {
return (
<ChildComponent formValidate={this.manageData} />
)
}

// Child Component
class ChildComponent extends Component {
componentDidMount() {
const fieldA = {
name: 'Phone Number',
value: '123456678'
},
fieldB = {
name: 'Email Address',
value: '[e-mail]'
}
this.props.formValidate(fieldA);
this.props.formValidate(fieldB)
}

render() {
/// Things happen here.
}
}

Answer 1

您已经在回答自己的问题了。React异步处理状态，因此您需要确保在调用setState时使用当前组件的状态。值得庆幸的是，React背后的团队非常清楚这一点，并为setState方法提供了过载。我会将您的manageData呼叫修改为以下内容：

manageData(data) {
this.setState(prevState => {
const nextState = Object.assign({}, prevState);
nextState.formData[data.name] = data.value;
return nextState;
});
}

setState的此重载采用一个函数，该函数的第一个参数是调用setState方法时组件的当前状态。以下是他们开始讨论这种形式的setState方法的链接。

https://reactjs.org/docs/state-and-lifecycle.html#state-更新可能是异步

Answer 2

将manageData更改为此

manageData(data) {
const newObj = {
[data.name]: data.value
};
this.setState(prevState => ({
formData: {
...prevState.formData,
...newObj
}
}));
}