React类组件中如何通过遍历数据循环设置对应的state状态变量

核心原理 #

实现动态键名需要使用ES6 对象计算属性语法。你之前尝试的this.setState({dat['field_name']:dat['start_text']})无法生效的原因是：对象字面量中未用方括号包裹的键会被识别为固定字符串，最终生成的键名是字面量dat['field_name']，而非读取dat对象内field_name的实际值。

单条记录对应的正确setState写法为：

// 当dat为 {start_type:0, field_name:'i1', start_text:'hi'} 时，等价于 setState({i1:'hi'})
this.setState({ [dat.field_name]: dat.start_text })

循环批量更新的完整实现 #

你当前代码里的双层for循环属于冗余逻辑：内层遍历dat所有属性的步骤没有必要，每条接口返回的dat已经是结构完整的单条记录，直接读取需要的字段值即可。优化后的逻辑参考如下：

• 提前定义允许更新的state字段白名单，适配TS类型校验，避免给未定义的state字段赋值触发类型报错
• 按业务规则过滤不需要的记录（例如仅处理start_type为0的条目）
• 遍历过程中逐次更新对应state字段

可直接运行的示例代码：

// 白名单和类组件state的类型定义保持一致
const allowedStateKeys = ['inId', 'i1', 'i2'];

response.data.forEach((dat) => {
  // 业务过滤：仅处理start_type为0的记录
  if (dat.start_type !== 0) return;
  // 跳过不在白名单内的字段，避免TS类型报错
  if (!allowedStateKeys.includes(dat.field_name)) return;
  // 动态更新对应state
  this.setState({ [dat.field_name]: dat.start_text });
});

注意事项 #

• React的setState会自动合并同一执行周期内的多次更新，循环中多次调用setState不会触发多次重复重渲染，无需手动合并为单个大的state对象
• 如果需要支持更新i3等新增字段，只需在类组件的state类型定义中补充对应字段类型（例如加上i3: string），同时将对应字段加入白名单即可
• 代码中冗余的getStartType=dat['start_type']赋值如果没有后续业务逻辑使用，可以直接删除

内容的提问来源于stack exchange，提问作者schoon