Question

我正在运行一个映射，该映射可动态创建一组组件，其中组件的总数基于数组的长度。每个组件都需要有自己的状态值。

因此，如果地图在三个项目的数组上运行...

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

某个地方的应用程序状态看起来像这样……可能类似于您在React Dev Tools中看到的样子……

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

不确定这是否可行...谢谢。

Answer 1

您可以这样做

newState = {};

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

setState(newState);

这是您要做什么吗？

Answer 2

是的，可以那样做。

如果要在挂载component之后执行类似的操作，可以参考Chris Sandvik Answer。

但是如果您想使用props或其他方法在构造函数中执行此操作。您可以对他的代码进行如下更改。

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);

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

2 个答案: