当父组件传入值变化时重置react-hook-form字段值的方法

你遇到的核心问题是：React Hook Form的内部表单状态没有和外部传入的selectedDay同步。虽然input的显示值随selectedDate变化更新了，但表单提交时用的是Hook Form维护的内部状态，这个状态没有跟着外部值变化，所以提交的还是旧值。

不需要给这个只读input加onChange监听器，因为用户无法手动修改它。正确的做法是同步外部值到Hook Form的内部状态，具体实现如下：

修正后的代码 #

import { useEffect } from 'react';
import { useForm } from 'react-hook-form';

const DaySheet = ({ selectedDate }) => {
  const selectedDay = selectedDate.toDateString();
  const { register, handleSubmit, setValue } = useForm();

  // 监听selectedDay变化，同步到Hook Form的date字段
  useEffect(() => {
    setValue('date', selectedDay);
  }, [selectedDay, setValue]);

  const onSubmit = async (data) => {
    console.log(data);
    try {
      // 加await确保异步请求的错误能被catch捕获
      const response = await api.post('/sheets/save/', data);
      console.log(response);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="form2">
      <input
        type="text"
        className="txtBox"
        value={selectedDay}
        readOnly={true}
        {...register('date')}
      />
    </form>
  );
};

export default DaySheet;

关键说明 #

1. 用useEffect同步状态：当父组件传入的selectedDate变化时，selectedDay会更新，此时useEffect触发，调用setValue把最新的selectedDay同步到Hook Form中date字段的内部状态，确保提交时拿到最新值。
2. 修复异步请求的错误捕获：原代码中api.post是异步操作，不加await的话，try/catch无法捕获请求失败的错误，因此要加上await并把onSubmit改为异步函数。
3. 移除无意义的key：给form加固定的key={1}不会起到预期的渲染优化作用，反而可能干扰React的渲染逻辑，建议移除。

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