React嵌套含数组State更新：点击按钮新增select选项实现咨询

问题场景 #

开发支持用户自定义录入下拉选项、配置选中项条件逻辑的React应用时，需要实现点击Add options按钮，向select1状态对象中properties字段下的options数组插入新选项对象的功能。

原有代码问题 #

• 状态更新返回结构错误：原有逻辑将新生成的options数组直接放在了状态根层级，没有嵌套到properties字段内，导致渲染时读取的select1.properties.options始终为初始值，新增选项无法展示
• 嵌套状态更新未做逐层不可变拷贝，不符合React状态更新规范
• 下拉选项渲染时未给<option>标签加唯一key属性，会触发React渲染警告

修正后的实现代码 #

1. 修正选项新增函数 #

function addOptionsVal() {
  // 非空校验，避免提交空选项
  if (!optionVal.trim()) return;

  setSelect1((prevState) => {
    // 逐层拷贝嵌套状态，避免直接修改原状态
    return {
      ...prevState,
      properties: {
        ...prevState.properties,
        // 追加新选项到数组末尾，如果需要插入到指定位置，可先拷贝数组再用splice插入
        options: [
          ...prevState.properties.options,
          {
            id: uuid(),
            label: optionVal.trim(),
            value: {
              labelTxt: optionVal.trim(),
              childOptions: [],
            },
          }
        ]
      }
    };
  });

  // 新增完成后清空输入框，优化交互
  setOptionVal('');
}

如果需要固定把新选项插入到数组索引为1的位置，可将options字段的赋值逻辑替换为以下写法：

options: (() => {
  const copiedOptions = [...prevState.properties.options];
  copiedOptions.splice(1, 0, {
    id: uuid(),
    label: optionVal.trim(),
    value: {
      labelTxt: optionVal.trim(),
      childOptions: [],
    }
  });
  return copiedOptions;
})()

2. 修正下拉框渲染逻辑 #

<select name="" id="">
  <option value="">--select--</option>
  {select1.properties.options.map((option) => {
    // 给option加唯一key，绑定value属性方便后续取值
    return <option key={option.id} value={option.value.labelTxt}>{option.label}</option>;
  })}
</select>

3. 输入框change逻辑参考 #

function handleValueChange(e) {
  setOptionVal(e.target.value);
}

优化建议 #

• 可新增重复选项校验，对比已有选项的labelTxt，避免添加重复选项
• 输入框可绑定回车事件，支持按回车快速添加选项，不用每次点按钮
• 后续如果要做条件逻辑，可直接读取select的选中值，匹配对应选项的childOptions做级联渲染即可

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