Question

我正在尝试根据传入的索引变量分配一个新值，并且在我的状态下它没有更新。它的目的是切换对象阵列，以允许条件渲染，但是当我执行状态控制台日志时，它并没有改变。

this.state = {
      value: 0,
      metadata: MetaDataData,
      togglePanel: false,
      activeItem: {0: false, 1: false, 2: false}
    };

toggleActiveItem = (activeIndex) => {
    const index = activeIndex
    this.setState((prevState) => {
      return {...prevState.activeItem, [index]: !prevState.activeItem[index]}
    })
  }

例如，当传入索引为零时调用此方法时，我希望第0个实例从false更改为true。

Answer 1

它不起作用，因为没有引用对象

activeItem: {0: false, 1: false, 2: false}

通过传播，您可以更新activeItem，但您并未将其设置为当前状态

尝试一下：

this.state = {
      value: 0,
      metadata: MetaDataData,
      togglePanel: false,
      activeItem: {0: false, 1: false, 2: false}
    };

toggleActiveItem = (activeIndex) => {
    const index = activeIndex
    this.setState((prevState) => {
      const newState = {...prevState.activeItem, [index]: !prevState.activeItem[index]}
      return {activeItem: newState}
    })
  }

Answer 2

所以我想出了我的问题。我实际上并没有将这些值分配给状态对象activeItem。

退货必须为：

return {activeItem: {...prevState.activeItem, [index]:!prevState.activeItem[index]}}

吊具分配新值时出现问题

2 个答案: