Next.js中React编辑表单填充数据失败 出现受控输入转非受控报错

核心问题定位 #

• 原代码的useEffect条件判断逻辑完全失效：判断式if (!crop || cropUuid)中，cropUuid是路由传入的参数，页面加载完成后始终为truthy值，导致整个条件判断永远成立，代码只会持续走发起详情请求的分支，永远不会进入else分支执行表单字段赋值操作。
• 副作用依赖配置错误：原useEffect使用空依赖数组[]，仅会在组件首次挂载时执行一次。后续redux中的详情数据更新时，副作用不会重新触发，即使拉取到了正确的详情数据，也无法同步到表单的本地状态中。
• 赋值过程缺少空值兜底：当从redux拿到的详情对象字段为undefined时，直接将undefined赋值给本地表单状态，会导致输入框绑定的value从初始空字符串切换为undefined，直接触发“受控输入切换为非受控输入”的控制台报错。

修复实现 #

调整后的核心逻辑如下：

useEffect(() => {
  // 等待路由参数加载完成，避免空uuid触发无效请求
  if (!cropUuid) return;

  // 当redux中没有当前uuid对应的详情数据时，发起拉取请求
  if (!crop || crop.uuid !== cropUuid) {
    dispatch(getCropDetails(cropUuid));
    return;
  }

  // 拿到匹配的详情后，做空值兜底，保证赋值永远是确定的字符串值
  setCropName(crop.cropName ?? '');
  setCropAbbreviation(crop.cropAbbreviation ?? '');
  setStrPartNumber(crop.strPartNumber ?? '');
// 将所有依赖的响应式变量加入依赖数组，保证数据变化时副作用同步执行
}, [crop, cropUuid, dispatch]);

落地注意事项 #

• 确保详情页的redux初始化状态合理：比如初始crop值设为null，避免请求未完成时返回字段缺失的部分对象。
• 所有受控输入的绑定值做兜底处理：无论是从接口拉取的初始值还是用户交互修改的值，都要保证状态为确定的JS值，禁止将undefined直接绑定到输入框的value属性上，从根源避免受控组件模式切换的报错。
• 后续如果表单字段增多，可直接将整个详情对象同步到单个表单状态中，减少手动逐字段赋值的重复代码。

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