React Hook Form defaultValues不生效问题求助

问题原因 #

组件初始化时，data是初始的空数组，此时解构出的problemName为undefined，useForm会用这个值初始化表单默认值。后续axios请求完成更新data后，useForm不会自动重新读取新的defaultValues，导致表单里依旧显示undefined；但组件会因data更新重新渲染，此时console.log(problemName)能拿到正确值。

解决方案 #

1. 修正初始状态类型

接口返回的是单个问题数据，而非数组，所以把data的初始状态改为空对象：

const [data, setData] = useState({});

2. 使用reset方法更新表单值

从useForm中解构出reset方法，在axios请求成功后调用它，将新获取到的problemName设置为表单默认值。

修改后的完整代码 #

import axios from 'axios';
import React, { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';

const SingleProble = () => {
  const navigate = useNavigate();
  const { problemNames } = useParams();
  const [data, setData] = useState({});

  // 解构出reset方法
  const { register, handleSubmit, reset } = useForm({ 
    defaultValues: { name: data.problemName } 
  });

  useEffect(() => {
    axios.get(`http://localhost:5000/problems/math/${problemNames}`)
      .then(res => {
        setData(res.data);
        // 数据获取后重置表单默认值
        reset({ name: res.data.problemName });
      })
  }, [problemNames, reset])

  const { problemName, score, problemDetails, level, problemAns, tried, solved, failed } = data

  const onSubmit = (formData) => {
    // 表单提交逻辑
    console.log(formData);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} placeholder="题目名称" />
      {/* 其他表单字段 */}
      <button type="submit">提交</button>
    </form>
  )
}

export default SingleProble;

补充说明 #

• reset方法是React Hook Form提供的官方API，专门用于动态更新表单值，能确保表单状态和最新数据同步。
• 若不想用reset，也可以通过useMemo动态生成defaultValues，但需注意useForm在组件挂载后不会自动监听defaultValues的变化，实际场景中reset方法更可靠。

内容的提问来源于stack exchange，提问作者JN Jony Hossain