在React中动态添加属性到this.state

Question

I'm running a map that dynamically creates a group of components where the total number is based on the length of an array. Each component needs its own value in state.

So if the map runs over an array of three items...

arr.map((item, index) => {
  const newStateProp = "item" + index;
  return newStateProp;
}

The app state would look like this somewhere...maybe similar to what you would see in React Dev Tools...

...
this.state: {
  item0: false,
  item1: false,
  item2: false
}
...

Not sure if this is doable...thanks in advance.

Answer 1

You could do something like this

newState = {};

for (let i = 0; i < arr.length; i++) {
    newState[arr[i]] = false
}

setState(newState);

Is that what you're trying to do?

Answer 2

Yeah, It is possible to do like that.

If you want to do something like that after component is mounted, you can refer to Chris Sandvik Answer .

But If you want to do it in constructor using from props or anything else. You can do some change to his code like below.

 const arr = []; const newState = {}; for (let i = 0; i < arr.length; i++) { newState[`item${arr[i]}`] = false; } this.state = newState; console.log('State', this.state);