React结合Antd Select循环渲染时，如何在onChange中为State设置带索引的字段名

我来帮你搞定这个问题！你现在遇到的核心问题有两个：一是在setState里无法直接用模板字符串生成动态属性名（你的写法不符合JS语法），二是用securityQuestions{i}这种单独的state字段来存储每个Select的选中值，其实不是最合理的状态管理方式。下面给你两种解决方案，更推荐第二种：

方案1：使用计算属性名直接更新（贴合你原本的思路） #

如果坚持要保留securityQuestions0、securityQuestions1这种单独的state字段，你需要用ES6的计算属性名语法，把动态生成的键名用方括号包裹起来：

{this.state.count.map((d, i) => ( 
  <Select 
    key={i} // 列表渲染务必加唯一key，React性能优化和避免警告的要求
    placeholder={`Question #${i + 1}`} 
    style={{ width: '100%' }} 
    onChange={(e) => {
      // 用方括号包裹动态键名，实现计算属性名
      this.setState({
        [`securityQuestions${i}`]: e
      })
    }}
    showSearch 
    optionFilterProp="children" 
    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} 
    filterSort={(optionA, optionB) => optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())}
  > 
    {this.state.securityQuestions && this.state.securityQuestions.map((d) => (
      <Select.Option key={d.id} value={d.id}>{d.securityQuestion}</Select.Option>
    ))} 
  </Select> 
))}

方案2：用数组统一管理选中值（强烈推荐） #

更符合React状态管理思路的是，用一个数组来集中存储每个Select的选中值，这样状态结构更清晰，后续维护和处理也更方便：

第一步：初始化State #

constructor(props) {
  super(props);
  this.state = {
    count: [1,2,3], // 假设你的count是对应数量的数组
    securityQuestions: [], // 你的安全问题列表
    selectedSecurityQuestions: Array(this.state.count.length).fill('') // 初始化与count长度匹配的空数组
  };
}

第二步：修改循环渲染的Select组件 #

{this.state.count.map((d, i) => ( 
  <Select 
    key={i}
    placeholder={`Question #${i + 1}`} 
    style={{ width: '100%' }} 
    value={this.state.selectedSecurityQuestions[i]} // 绑定对应索引的选中值
    onChange={(e) => {
      // 用函数式setState确保拿到最新的state，避免异步更新问题
      this.setState(prevState => {
        const newSelectedList = [...prevState.selectedSecurityQuestions];
        newSelectedList[i] = e;
        return { selectedSecurityQuestions: newSelectedList };
      });
    }}
    showSearch 
    optionFilterProp="children" 
    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} 
    filterSort={(optionA, optionB) => optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())}
  > 
    {this.state.securityQuestions && this.state.securityQuestions.map((d) => (
      <Select.Option key={d.id} value={d.id}>{d.securityQuestion}</Select.Option>
    ))} 
  </Select> 
))}

为什么方案2更优？ #

• 状态结构更集中，所有选中值都在一个数组里，提交表单或后续处理时直接取用即可
• 避免了零散的state字段，减少维护成本
• 函数式setState确保了状态更新的准确性，不会因为React状态异步更新导致的逻辑错误

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