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

反应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),
  );
};

反应布尔值的setState不更新

3 个答案: