React中动态为select下拉框option添加选项报不可迭代错误

你的state类型更新前后不一致，直接触发了迭代错误：

• 初始化时emplist是数组类型，存储所有下拉选项
• 调用setEmpList时，你错误地给它赋值了一个对象结构{inputValue: '', emplist: [...]}，完全改变了state的类型
• 第一次触发addNewEmp时，更新回调里拿到的data是初始的数组值，数组本身不存在emplist属性，data.emplist返回undefined，对undefined执行展开运算符就会抛出「不可迭代」的类型错误。
• 即便第一次不报错，后续emplist会被改成对象，执行emplist.map()渲染选项时也会因为数组方法不存在再次报错。

两个独立的useState状态要分开更新，不要把inputValue的更新逻辑塞到setEmpList里，始终保证emplist是数组类型：

const addNewEmp=()=>{
    // 只更新下拉选项列表，始终保持数组结构
    setEmpList((currentList)=>[
        ...currentList,
        {
            empName: inputValue
        }
    ]);
    // 单独清空输入框状态
    setInputValue('');
}

修复后完整组件代码 #

import React, { useState } from 'react'

const Select = () => {
    const [inputValue,setInputValue] = useState('')
    const [emplist, setEmpList] = useState([
        {
            empName: '---Select---'
        }
    ]);


  const addNewEmp=()=>{
      setEmpList((currentList)=>[
          ...currentList,
          {
              empName: inputValue
          }
      ]);
      setInputValue('');
  }

  let empRecords = emplist.map((item, index) => {
    return <option key={index}>{item.empName}</option>;
  });

    return (
      <>
        <input
          type="text"
          placeholder="add options"
          value={inputValue}
          onChange={(e)=> setInputValue(e.target.value)}
        />
         <button onClick={addNewEmp}>Add +</button>
        <br />
         <select>{empRecords}</select>
      </>
    );
}

export default Select

额外优化点 #

• 给循环渲染的option补充了key属性，避免React渲染告警
• 给input标签绑定了value={inputValue}，改为标准受控组件，点击添加后输入框内容会同步清空
• 移除了无意义的{inputValue}文本展示，如有需要可以自行加回

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