javascript - Reactjs 中的状态没有更新

Question

我正在尝试从initialShapes 状态更新finalShapes 状态，但遇到finalShapes 未更新的问题。我正在 initalShapes 状态中进行一些更改，然后将操作的数据存储在 FinalShapes 中。请告诉我我做错了什么

this.state.initialShapes.map (sh => {
   var data = {};
   data.name = sh.name;
   data.x1 = sh.x;
   data.y1 = sh.y;
   data.x2 = sh.x + sh.width;
   data.y2 = sh.y + sh.height;
   this.setState ({finalShapes : [...this.state.finalShapes, data]});
});

Answer 1

您不会在循环中更新状态，因为它不会立即更新状态。这意味着循环的下一次迭代将看不到更新的状态。

ReactDocs :

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

您可以复制initialShapes并更新一次状态

var updatedShapes = this.state.initialShapes.map (sh => {
  var data = {};
  data.name = sh.name;
  data.x1 = sh.x;
  data.y1 = sh.y;
  data.x2 = sh.x + sh.width;
  data.y2 = sh.y + sh.height;

  return data;
});

this.setState ({finalShapes : updatedShapes });