在 React 中，如何在循环中设置 state 变量？

Question

我有许多 state 变量（我只显示 3 个）：

class IntroductionPage extends React.Component<SomePageProps, {inId: string,
  i1: string,
  i2: string
}> {
  constructor(props: any) {
    super(props);
    this.state = {inId:'',
      i1:'',
      i2:''
    };
  }

我正在从数据库中读取键值对：

+------------+------------+------------+
| start_type | field_name | start_text |
+------------+------------+------------+
| 0          | i1         | hi         |
+------------+------------+------------+
| 0          | i2         | it's me!   |
+------------+------------+------------+
| 0          | i3         | Schoon     |
+------------+------------+------------+


for (var key in response.data) {
  var dat = response.data[key];
  getStartType=dat['start_type']//JSON.stringify(dat['start_type']);
  for (var inner_key in dat) {
    console.log('key=' + inner_key + ' value=' + dat[inner_key]);
  }

给

key=start_type value=0
key=field_name value=i1
key=start_text value=hi
...

现在有什么方法可以遍历这些检索到的值并设置 state，例如类似于循环或 map 版本：

this.setState({dat['field_name']:dat['start_text']});

所以返回的第一行是 fieldname= i1, start_text ='hi' 所以循环会setState ({i1:'hi'}) ？

Answer 1

反应文档：

setState() 不会立即改变 this.state 而是创建一个挂起的 state 转换。 在调用此方法后访问 this.state 可能会返回现有值。 无法保证对 setState 的调用的同步操作，并且调用可能 > 批处理以提高性能

不要在循环中调用 setState，只需在循环中更新局部变量，然后在该变量上调用 setSate 方法，它会为您节省一些重新渲染

Answer 2

作为“我可以这样做吗？”的技术问题。 答案是“是”。 可以在示例中的循环内调用setState ，因为每个 state 更新彼此独立，并且不依赖于 state 的先前值。 React 可能会将setState更新批处理在一起，这样您就不会有多次重新渲染。

for (var key in response.data) {
  var dat = response.data[key];
  this.setState({ [dat.field_name]: dat.start_text });
}

您在[dat.field_name]周围使用括号，因为它是一个变量属性键。 但是变量属性名称对于 Typescript 来说是个问题，因为它假定它们是string而不是有效键。

---

我可能会按照@Sharon Geller 的建议做，并使用组合值调用setState一次。

const changes = response.data.reduce(
  (acc, curr) => ({ ...acc, [curr.field_name]: curr.start_text }),
  {}
);
this.setState(changes);

从技术上讲，这不需要断言，因为changes的类型是空的 object {} ，但您可能希望将初始值{} as State 。