React表单组件复用问题：切换章节后输入值残留

核心问题排查 #

• 组件复用导致渲染残留：React动态渲染组件时，若未设置唯一key，会复用旧组件实例，造成之前章节的内容、标题无法更新。
• 状态更新未触发重渲染：当前章节的状态变量更新后，未正确传递给子组件，或子组件未监听props变化。

针对性修复方案 #

1. 给动态渲染的SectionInput绑定唯一key #

在Workspace页面渲染SectionInput时，必须将当前章节的唯一标识（如id）作为key传入：

// Workspace页面渲染逻辑
<SectionInput
  key={currentSection.id} // 关键：添加唯一key，强制React销毁旧组件、创建新实例
  section={currentSection}
  formData={formData}
  onFormChange={handleFormChange}
/>

2. 确认章节切换时状态正确更新 #

检查切换章节的逻辑，确保currentSection状态确实切换到目标章节：

// 示例章节切换函数
const handleSwitchSection = (targetSectionId) => {
  const targetSection = sections.find(sec => sec.id === targetSectionId);
  setCurrentSection(targetSection); // 确保状态更新触发重渲染
};

可以通过console.log(currentSection)在切换时验证状态是否变化。

3. SectionInput组件直接使用props渲染内容 #

确保SectionInput组件直接依赖传入的section props渲染标题和字段，而非内部缓存状态：

// SectionInput组件示例
const SectionInput = ({ section, formData, onFormChange }) => {
  return (
    <div className="section-container">
      <h3>{section.title}</h3> {/* 直接使用props中的章节标题 */}
      {section.fields.map(field => (
        <div key={field.name} className="form-field">
          <label>{field.label}</label>
          <input
            name={field.name}
            value={formData[field.name] || ''}
            onChange={onFormChange}
          />
        </div>
      ))}
    </div>
  );
};

若组件内部必须维护状态，需通过useEffect监听section props变化并更新：

useEffect(() => {
  setInternalSection(section);
}, [section]); // 仅当section变化时更新内部状态

额外验证步骤 #

• 打开React DevTools，切换章节时查看currentSection状态是否同步变化
• 检查表单字段名是否按章节隔离，避免不同章节字段名冲突导致内容残留

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