React中如何在数组添加带键对象并生成输入字段及报错解决

原本需求是将用户姓名从字符串数组（示例：["Dilan", "Chris", "Robert"]）改为存入包含name和active字段的对象数组，对象结构定义如下：

const initialName = {
  name: "",
  active: ""
};

但运行提供的代码时出现TypeError: initialName is not iterable报错，且仅需收集对象中的name值，以下是问题分析和修复方案：

原代码问题点 #

1. 迭代对象导致报错：const list = [...initialName];试图展开单个对象，而对象不具备可迭代性，直接引发类型错误。
2. 状态更新函数笔误：setLanguages应为setNames，与定义的状态更新函数不匹配。
3. 对象引用风险：直接将initialName添加到数组中，多个元素会引用同一对象，后续修改会引发意外的状态同步。
4. 错误的对象更新方式：直接用字符串值替换数组中的对象，破坏了原本的对象结构。

修复后的完整代码 #

const initialName = {
  name: "",
  active: ""
};

export default function AddingNames() {
  // 初始化时复制初始对象，避免引用同一实例
  const [names, setNames] = useState([{...initialName}]);

  // 添加新的空对象到数组
  const handleAddClick = () => {
    // 使用函数式更新获取最新状态，同时复制初始对象作为新元素
    setNames(prevNames => [...prevNames, {...initialName}]);
  };
  
  // 更新指定索引对象的name字段
  const handleItemChanged = (event, index) => {
    const inputValue = event.target.value;
    setNames(prevNames => {
      // 复制当前状态数组
      const updatedList = [...prevNames];
      // 复制原对象并仅更新name字段，保留active值
      updatedList[index] = {...updatedList[index], name: inputValue};
      return updatedList;
    });
  };

  // 示例渲染逻辑，可按需调整
  return (
    <div>
      {names.map((item, idx) => (
        <input
          key={idx}
          value={item.name}
          onChange={(e) => handleItemChanged(e, idx)}
          placeholder="请输入姓名"
          style={{margin: "0 8px 8px 0"}}
        />
      ))}
      <button onClick={handleAddClick}>添加输入框</button>
      <div>当前收集的姓名对象：</div>
      <pre>{JSON.stringify(names, null, 2)}</pre>
    </div>
  );
}

核心修复说明 #

• 解决迭代报错：放弃展开单个对象的操作，改为基于当前状态数组进行复制，确保操作的是可迭代的数组类型。
• 函数式状态更新：使用setNames(prevNames => ...)的形式，保证每次状态更新都基于最新的数组值，避免状态滞后问题。
• 独立对象实例：通过对象展开语法{...initialName}创建新对象实例，确保数组中每个元素都是独立的，不会互相影响。
• 正确更新对象字段：复制原对象并仅修改name字段，既保留了对象结构，又满足仅收集姓名的需求。

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