React中使用useForm的setValue为编辑页表单赋值的方法

针对Editbook组件无法用setValue填充ISBN、title、author原有值的问题，以下是不同技术场景下的解决方案及排查要点：

场景1：使用React Hook Form库 #

如果你的项目基于react-hook-form实现表单逻辑，核心要确保在获取到目标图书数据后再执行赋值操作：

• 利用useEffect监听图书数据的变化，当数据存在时调用setValue为字段赋值：

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

function Editbook({ targetBook }) {
  const { register, setValue } = useForm();

  useEffect(() => {
    if (targetBook) {
      setValue('ISBN', targetBook.ISBN);
      setValue('title', targetBook.title);
      setValue('author', targetBook.author);
    }
  }, [targetBook, setValue]);

  return (
    <form>
      <input {...register('ISBN')} placeholder="ISBN" />
      <input {...register('title')} placeholder="书名" />
      <input {...register('author')} placeholder="作者" />
      <button type="submit">保存修改</button>
    </form>
  );
}

• 若表单字段名与图书对象属性名完全一致，可直接用reset方法批量赋值，代码更简洁：

useEffect(() => {
  if (targetBook) {
    reset(targetBook);
  }
}, [targetBook, reset]);

场景2：原生React受控组件（useState） #

如果未使用表单库，直接通过useState维护表单状态，只需在获取到图书数据后更新状态即可：

import { useState, useEffect } from 'react';

function Editbook({ bookId }) {
  const [formData, setFormData] = useState({
    ISBN: '',
    title: '',
    author: ''
  });

  useEffect(() => {
    // 根据bookId请求目标图书数据
    const fetchBook = async () => {
      const response = await fetch(`/api/books/${bookId}`);
      const book = await response.json();
      // 填充原有值到表单状态
      setFormData({
        ISBN: book.ISBN,
        title: book.title,
        author: book.author
      });
    };

    fetchBook();
  }, [bookId]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <form>
      <input 
        name="ISBN" 
        value={formData.ISBN} 
        onChange={handleInputChange} 
        placeholder="ISBN" 
      />
      <input 
        name="title" 
        value={formData.title} 
        onChange={handleInputChange} 
        placeholder="书名" 
      />
      <input 
        name="author" 
        value={formData.author} 
        onChange={handleInputChange} 
        placeholder="作者" 
      />
      <button type="submit">保存修改</button>
    </form>
  );
}

关键排查要点 #

• 确认图书数据完整性：在控制台打印目标图书对象，检查ISBN、title、author字段是否存在、拼写正确（注意大小写匹配）且有有效值。
• 控制赋值时机：必须在图书数据加载完成后执行setValue或状态更新，避免在数据为undefined/null时赋值。
• 路由参数校验：若通过路由进入编辑页，确认路由参数中的图书ID正确，能通过该ID获取到对应图书数据。

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