反应布尔值的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);)

见docs on 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),
  );
};