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: 'john@example.com'
    }

    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-updates-may-be-asynchronous

Answer 2

将manageData更改为此

manageData(data) {
  const newObj = {
    [data.name]: data.value
  };

  this.setState(prevState => ({
    formData: {
      ...prevState.formData,
      ...newObj
    }
  }));
}

子组件内部两次调用ReactJS函数无法两次设置父状态

2 个答案: