React Hook Forms+MUI自定义输入框调用setValue后不更新显示问题

问题核心 #

你通过setValue更新lineItems[${index}].totalAmount后，getValues能拿到正确值，但自定义的CustomInput组件无法同步显示，本质是自定义组件没有正确绑定React Hook Forms的表单状态同步机制——直接用register绑定只读计算字段时，RHF不会主动触发组件重渲染更新值。

修复步骤 #

1. 用Controller包裹CustomInput #

对于由代码计算更新的只读字段，必须使用RHF的Controller组件来绑定，它会监听表单状态变化并自动同步到组件：

// 在Field Array的行项目渲染中替换原有的CustomInput绑定
import { Controller } from 'react-hook-form';

// ...其他代码
<Controller
  name={`lineItems[${index}].totalAmount`}
  control={control} // 从useForm中解构的control对象
  render={({ field }) => (
    <CustomInput
      {...field}
      label="总计"
      disabled
    />
  )}
/>

2. 确保CustomInput正确接收value属性 #

检查你的CustomInput组件，要保证它正确接收并渲染value属性，避免初始值或更新值丢失：

// custom-input.tsx 调整后的代码
import TextField from '@mui/material/TextField';

const CustomInput = ({ label, disabled, value, onChange, ...props }) => {
  return (
    <TextField
      fullWidth
      label={label}
      disabled={disabled}
      value={value ?? 0} // 处理undefined情况，显示0或空
      onChange={onChange}
      {...props}
    />
  );
};

export default CustomInput;

3. 优化handleOnChange逻辑 #

更新总计值时，确保setValue的配置正确（可选，但能避免不必要的问题）：

const handleOnChange = (index: number) => {
  const quantity = watch(`lineItems[${index}].quantity`) || 0;
  const unitPrice = watch(`lineItems[${index}].unitPrice`) || 0;
  const total = quantity * unitPrice;

  // 设置时确保触发组件更新
  setValue(`lineItems[${index}].totalAmount`, total, {
    shouldDirty: true,
    shouldTouch: true,
  });
};

原理说明 #

React Hook Forms中，register主要用于用户可交互的输入控件，而Controller是为第三方组件（如MUI TextField）或非用户直接输入的字段设计的，它会建立表单状态和组件之间的双向同步。当你通过setValue更新字段后，Controller会自动感知状态变化并更新组件的value属性，解决之前只在getValues中能拿到值但组件不更新的问题。

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