Question

我正在this.setState内使用handleFormSubmit，但this.setState没有更新，我不知道为什么。如果我在console.log(updatePosition)之前运行this.setState我可以将所有数据都存在。我错过了什么？我对handleChange使用类似的代码，我没有问题。

constructor(props) {
  super(props);

  let uniqueId = moment().valueOf();

  this.state = {
    careerHistoryPositions: [{company: '', uniqueId: uniqueId, errors: {} }],
  };

  this.handleFormSubmit = this.handleFormSubmit.bind(this);
}




handleFormSubmit(event) {
  event.preventDefault();
  const { careerHistoryPositions } = this.state;

  const updatePosition = this.state.careerHistoryPositions.map((careerHistoryPosition) => {
    const errors = careerHistoryValidation(careerHistoryPosition);
    return { ...careerHistoryPosition, errors: errors  };
  });

  console.log(updatePosition)
  this.setState({ careerHistoryPositions: updatePosition });
}

Answer 1

请记住，状态不会立即更新。如果要检查它是否已更新，请使用回调函数。如下：

this.setState({ careerHistoryPositions: updatePosition }, () => console.log(this.state.careerHistoryPositions);

来自文档：

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值。没有保证调用setState和调用的同步操作为获得业绩增长而受到批评。

希望这有帮助。

Answer 2

你应该展示你是如何调用handleFormSubmit的，因为它与Dom事件有关。所以this不是类/组件，相反，如果你console.log(this);，你会看到它是Dom元素，表单元素。

要使代码按预期工作，在组件constructor()方法中，添加此项以将处理函数重新绑定到react组件的类方法，您将可以访问this.state和{{ 1}}

this.setState()

this.setState不更新状态

2 个答案: