React Hooks跨页面更新状态报错：受控输入变非受控问题求解

兄弟，你碰到的这个警告根源是状态更新时破坏了原本的状态结构，导致输入组件的value从有效值变成了undefined，React就判定组件从受控模式切换到了非受控模式。咱们一步步来修复：

错误原因拆解 #

你在useEffect里更新状态时，直接返回了{ data: { name: location.data.name } }，这相当于把原来包含name、email等字段的data对象，替换成了一个只有data属性的新对象。这时候data.name就变成了undefined，输入框的value变成undefined，自然触发了受控转非受控的警告。

正确的状态更新姿势 #

更新状态时要保留原有状态的结构，用对象展开运算符...合并新旧状态，而不是直接替换整个对象：

修正后的useEffect代码 #

useEffect(() => {
  if (location.data) {
    changeData((prevState) => {
      // 展开原有状态，只覆盖需要更新的name字段
      return { 
        ...prevState, 
        name: location.data.name 
      };
    });
  }
}, [location.data]); // 把location.data加入依赖数组，既符合Hooks规则又避免无效重复执行

额外优化提醒 #

• 如果需要更新多个字段，同样用展开运算符批量合并：

  return {
    ...prevState,
    name: location.data.name,
    email: location.data.email,
    phone: location.data.phone
    // 其他需要同步的字段
  };
  

• 确保你的handleChangeData函数也遵循同样的状态更新逻辑，比如：

  const handleChangeData = (e, field) => {
    // 针对复选框单独处理布尔值
    const value = ['rodo', 'regulations'].includes(field) ? e.target.checked : e.target.value;
    changeData(prev => ({
      ...prev,
      [field]: value
    }));
  };
  

这样修改后，状态结构始终保持一致，输入框的value永远是data.name（要么是初始空字符串，要么是更新后的值），不会出现undefined的情况，警告也就自然消失了。

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