反应布尔值的setState不更新

Question

React的新功能，尝试更新on属性已经具有设置布尔值的对象的状态。 但是，状态似乎没有更新。

我知道状态是异步更新的，也许可以在这里发挥作用？ 我不相信我可以使用带有对象和回调函数的setState方法，因为我需要访问以前的状态。

这是我的初始状态：

items: [
    {
        id: 0,
        title: 'Dev Grub',
        selected: false
    },
    ...
]

这是我的事件处理程序：

handleCardClick(id, card) {
    this.setState((preState, props) => ({
        [preState.items[id].selected]: [preState.items[id].selected] ? false : true
    }));

    console.log('new state: ', this.state.items[id].selected);

}

我也尝试过此方法，而不是三元方法： ![card.selected]

Answer 1

仅在状态的第二级更新属性不会起作用。 使用如下内容：

handleCardClick(id, card) {
    let items = [...state.items];
    items[id].selected = items[id].selected ? false : true
    this.setState(() => ({
        items
    }));
}

Answer 2

React setState不能以这种方式工作，它不会立即更新状态，而是将更改加入队列以在将来的某个时刻进行更新。

如果您想在状态更新后立即进行操作，则可以使用回调参数

this.setState((preState, props) => ({
    [preState.items[id].selected]: [preState.items[id].selected] ? false : true
}), () => console.log('new state: ', this.state.items[id].selected);)

请参阅有关setState的文档

Answer 3

setState是异步的，您可以在状态更改后控制台日志，例如：

handleCardClick = (id, card) => {
  this.setState(
    {
      [this.state.items[id].selected]: [this.state.items[id].selected]
        ? false
        : true,
    },
    () => console.log('new state: ', this.state.items[id].selected),
  );
};