React+TypeScript中如何向useState对象数组添加新参与者？

问题核心错误 #

1. 类型定义错误：participants被定义为固定长度的元组[{id?: number; name?: string}]，而非可扩展的数组类型，导致无法添加多个参与者。
2. 未定义变量：onChange回调里直接使用participants，但该变量未在当前作用域声明，应引用状态中的infoInputs.participants。
3. 初始状态缺失：初始infoInputs为空对象，participants未初始化，直接访问数组元素易触发报错。
4. 语法错误：{id: parseInt(e.target.value!}]缺少闭合的}，导致代码无法正常运行。

修正步骤 #

1. 修正类型定义

将participants改为标准数组类型：

type infoInputsType = {
  eventName?: string;
  participants?: {
    id?: number;
    name?: string;
  }[];
};

2. 初始化状态

给participants初始化为空数组，简化后续状态处理逻辑：

const [infoInputs, setInfoInputs] = useState<infoInputsType>({
  participants: []
});

3. 正确更新数组状态

使用函数式更新确保基于最新状态修改，同时处理空数组和无效输入的情况：

// 示例：更新第一个参与者的ID
<input
  value={infoInputs.participants[0]?.id ?? ''}
  onChange={(e) => {
    const newId = parseInt(e.target.value, 10);
    // 过滤非数字输入
    if (isNaN(newId)) return;

    setInfoInputs(prevState => {
      const updatedParticipants = [...prevState.participants];
      // 数组为空则新增参与者，否则更新第一个元素的ID
      if (updatedParticipants.length === 0) {
        updatedParticipants.push({ id: newId });
      } else {
        updatedParticipants[0] = { ...updatedParticipants[0], id: newId };
      }
      return { ...prevState, participants: updatedParticipants };
    });
  }}
  type="number"
/>

4. 支持动态添加多参与者

如果需要实现多参与者输入功能，可通过数组映射渲染输入框，搭配添加按钮：

// 添加新参与者的按钮事件
const addParticipant = () => {
  setInfoInputs(prev => ({
    ...prev,
    participants: [...prev.participants, { id: undefined, name: undefined }]
  }));
};

return (
  <div>
    <form>
      <input
        value={infoInputs.eventName ?? ''}
        onChange={(e) => setInfoInputs({ ...infoInputs, eventName: e.target.value })}
        type="text"
        placeholder="活动名称"
      />

      {/* 渲染所有参与者输入框 */}
      {infoInputs.participants.map((participant, index) => (
        <div key={index}>
          <input
            value={participant.id ?? ''}
            onChange={(e) => {
              const newId = parseInt(e.target.value, 10);
              if (isNaN(newId)) return;
              setInfoInputs(prev => {
                const updated = [...prev.participants];
                updated[index] = { ...updated[index], id: newId };
                return { ...prev, participants: updated };
              });
            }}
            type="number"
            placeholder="参与者ID"
          />
          <input
            value={participant.name ?? ''}
            onChange={(e) => {
              setInfoInputs(prev => {
                const updated = [...prev.participants];
                updated[index] = { ...updated[index], name: e.target.value };
                return { ...prev, participants: updated };
              });
            }}
            type="text"
            placeholder="参与者姓名"
          />
        </div>
      ))}

      <button type="button" onClick={addParticipant}>添加参与者</button>
    </form>
  </div>
);

关键注意事项 #

• 优先使用函数式更新setInfoInputs(prev => {...})，避免闭包导致的旧状态引用问题。
• 始终复制原数组/对象再修改，React状态是不可变的，直接修改不会触发组件重渲染。
• 处理parseInt返回NaN的情况，避免无效值存入状态。
• 用??空值合并运算符处理可选值的默认显示，防止页面出现undefined。

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