React+Framer Motion多表单状态更新异常求助

核心问题分析 #

你遇到的两个问题根源都是状态更新逻辑错误和受控组件绑定不规范：

1. 选择Protocol后界面不更新：受控组件的value未正确绑定到对应状态字段，导致状态变更无法同步到DOM。
2. 选择hops时link_level被清空：状态更新时未合并原有状态，直接覆盖了整个状态对象，导致其他字段丢失。

具体修复步骤 #

1. 修正状态更新逻辑 #

如果你的状态是用单个对象管理所有表单字段，必须使用函数式更新并合并原有状态，避免覆盖其他字段：

// 错误写法（会覆盖整个状态对象）
const handleChange = (e) => {
  const { name, value } = e.target;
  setValue({ [name]: value }); 
}

// 正确写法（合并原有状态，仅更新当前字段）
const handleChange = (e) => {
  const { name, value: inputValue } = e.target;
  setValue(prevState => ({
    ...prevState,  // 保留原有所有字段
    [name]: inputValue  // 更新当前字段
  }));
}

2. 确保受控组件正确绑定value #

所有表单控件（包括下拉框）必须明确绑定value到状态的对应字段，否则无法同步界面：

// Protocol下拉框示例（用motion.select包裹不影响绑定逻辑）
<motion.select
  name="protocol"
  value={value.protocol}  // 绑定到状态中的protocol字段
  onChange={handleChange}
>
  <option value="">Select Protocol</option>
  <option value="TCP">TCP</option>
  <option value="UDP">UDP</option>
</motion.select>

// hops下拉框示例
<motion.select
  name="link_level"
  value={value.link_level}  // 绑定到状态中的link_level字段
  onChange={handleChange}
>
  <option value="">Select number of hops</option>
  <option value="1">1</option>
  <option value="2">2</option>
</motion.select>

3. 多表单状态隔离（可选优化） #

如果三个表单是独立模块，建议将状态拆分管理，避免字段名冲突或相互干扰：

// 拆分三个表单的独立状态
const [form1State, setForm1State] = useState({ protocol: '', link_level: '' });
const [form2State, setForm2State] = useState({ /* form2字段 */ });
const [form3State, setForm3State] = useState({ /* form3字段 */ });

// 每个表单使用独立的handleChange
const handleForm1Change = (e) => {
  const { name, value } = e.target;
  setForm1State(prev => ({ ...prev, [name]: value }));
}

额外检查点 #

• 避免混用受控/非受控组件：不要同时设置defaultValue和value，必须统一使用受控模式（value+onChange）。
• 确认Framer Motion的动画属性未干扰组件渲染：如果使用motion组件包裹表单，确保没有设置animate/initial等属性导致组件意外卸载重渲染。

内容的提问来源于stack exchange，提问作者P.Chian