React循环渲染ExperienceForm时如何实现组件独立State？

核心问题是你现在所有ExperienceForm共用了同一个experienceInputs对象，要让每个表单独立维护自己的状态，得把状态改成数组结构，每个数组项对应一个表单的独立数据。具体步骤如下：

1. 调整Dashboard中的状态结构 #

把原本单个对象类型的experienceInputs改成数组，初始可以是空数组或者包含一个默认表单的初始数据：

// Dashboard组件内的状态初始化
const [experienceInputs, setExperienceInputs] = useState([
  { company: '', position: '', startDate: '', endDate: '', description: '' }
]);

2. 修改ResumeForm的渲染逻辑 #

遍历section时，要把当前项的索引传给ExperienceForm，同时把数组中对应的那项数据传递过去，而不是整个数组：

// ResumeForm组件内的遍历部分
{section.map((_, index) => (
  <ExperienceForm
    key={index} // 若有唯一标识id用id更稳妥，这里先简化用index
    experienceItem={experienceInputs[index]}
    onUpdateExperience={(updatedItem) => {
      const newExperiences = [...experienceInputs];
      newExperiences[index] = updatedItem;
      setExperienceInputs(newExperiences);
    }}
    setSection={setSection}
    index={index} // 传给子组件用于删除等操作
  />
))}

3. 改造ExperienceForm组件 #

让它接收自己对应的experienceItem和更新方法，不再依赖父组件的单个状态对象：

export default function ExperienceForm({
  experienceItem,
  onUpdateExperience,
  setSection,
  index
}) {
  // 处理输入变化，直接更新当前项
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    onUpdateExperience({ ...experienceItem, [name]: value });
  };

  // 删除当前表单的逻辑（示例）
  const handleRemove = () => {
    setSection(prev => prev.filter((_, i) => i !== index));
    // 也可以把删除experienceInputs的逻辑抽去Dashboard统一处理
  };

  return (
    <div className="experience-form">
      <input
        name="company"
        value={experienceItem.company}
        onChange={handleInputChange}
        placeholder="公司名称"
      />
      <input
        name="position"
        value={experienceItem.position}
        onChange={handleInputChange}
        placeholder="职位"
      />
      {/* 其他输入框同理 */}
      <button onClick={handleRemove}>删除</button>
    </div>
  );
}

4. 新增表单的逻辑 #

当用户点击添加新ExperienceForm时，同时往section数组和experienceInputs数组里各加一项初始数据：

// Dashboard或ResumeForm中的添加按钮逻辑
const addExperience = () => {
  setSection(prev => [...prev, {}]); // 保持section长度和experienceInputs一致
  setExperienceInputs(prev => [
    ...prev,
    { company: '', position: '', startDate: '', endDate: '', description: '' }
  ]);
};

这样每个ExperienceForm都会对应数组里独立的一项数据，修改时只会更新自己对应的那部分，不会互相影响。

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