javascript - React 中数组的长度与它所包含的元素数量不匹配

Question

每次单击我的卡片组件时，它都会运行 cardSelected() 函数。我可以看到状态数组 selected 正在使用卡 ID 正确更新，但是当我在使用 setState() 后检查数组的长度时> 这是一出局。

1. 数组开始为空
2. 点击第一张卡片后，数组将更新为卡片 ID
3. console.log(this.state.selected.length) 之后仍然显示长度为 0，而我期望它是 1 code> 并可以看到其状态为 1 值。

cardSelected = id => {
  this.setState(prevState => ({
    selected: [...prevState.selected, id]
  }));

  console.log(this.state.selected.length);
};

Answer 1

这是因为 setState 是异步的。

为了工作，请使用回调修复它，在状态更新后执行:

this.setState(prevState => ({
  selected: [...prevState.selected, id]
}),
() => console.log(this.state.selected.length))