反應布爾值的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),
  );
};