吊具分配新值时出现问题

Question

I'm am attempting to assign a new value based on a passed in index variable and it isn't updating in my state. Its intended to toggle an object array which will allow for conditional rendering but as I do a console log of my state it is not changing.

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]}
    })
  }

For instance when this is called with a passed in index of zero I would expect that the 0th instance to be changed from false to true.

Answer 1

It is not working because you are not referring to the object

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

By doing spread you update activeItem, but you are not setting it in the current state

Try this:

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

So I figured out my issue. I wasn't actually assigning these values to the state object activeItem.

The return needs to be:

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