Prisma+GraphQL+React Hook Form：更新表单无法加载已有数据

针对你遇到的更新表单无法加载已有数据的问题，结合你尝试过的方案，给出以下具体解决步骤：

1. 先处理数据未加载完成的报错问题 #

你用selectedIssueGroup.title时出现TypeError，大概率是组件初始化时selectedIssueGroup还处于null或undefined状态（比如异步请求还没返回数据），直接访问属性导致报错。

解决方法：

• 加条件渲染，确保数据存在再渲染表单：

{selectedIssueGroup && (
  <form>
    <input 
      type="text"
      {...register("title")} // 假设使用react-hook-form
      defaultValue={selectedIssueGroup.title}
    />
    {/* 其他字段同理 */}
  </form>
)}

• 或者给属性加可选链操作符，避免报错：

defaultValue={selectedIssueGroup?.title}

2. 正确使用setValue设置默认值（以react-hook-form为例） #

如果用react-hook-form，setValue需要在数据加载完成后调用，且要监听selectedIssueGroup的变化：

import { useForm } from "react-hook-form";

const UpdateForm = ({ selectedIssueGroup }) => {
  const { register, setValue, handleSubmit } = useForm();

  // 监听selectedIssueGroup变化，设置表单默认值
  useEffect(() => {
    if (selectedIssueGroup) {
      // 逐个字段设置，或者批量设置
      setValue("title", selectedIssueGroup.title);
      setValue("description", selectedIssueGroup.description);
      // 其他字段...
    }
  }, [selectedIssueGroup, setValue]);

  const onSubmit = (data) => {
    // 提交更新逻辑（你这边已正常工作）
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" {...register("title")} />
      <textarea {...register("description")} />
      <button type="submit">更新</button>
    </form>
  );
};

注意：依赖数组必须包含selectedIssueGroup和setValue，确保数据更新时重新设置表单值。

3. 避免受控组件无法编辑的问题 #

你用value属性导致字段无法编辑，是因为只设置了value但没绑定onChange更新状态，变成了“纯受控”组件但没有状态更新逻辑。如果要用受控模式，必须配合状态更新：

import { useState, useEffect } from "react";

const UpdateForm = ({ selectedIssueGroup }) => {
  const [formData, setFormData] = useState({ title: "", description: "" });

  useEffect(() => {
    if (selectedIssueGroup) {
      // 数据加载完成后更新表单状态
      setFormData(selectedIssueGroup);
    }
  }, [selectedIssueGroup]);

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

  const onSubmit = (e) => {
    e.preventDefault();
    // 提交formData到后端
  };

  return (
    <form onSubmit={onSubmit}>
      <input 
        type="text" 
        name="title" 
        value={formData.title} 
        onChange={handleChange} 
      />
      <textarea 
        name="description" 
        value={formData.description} 
        onChange={handleChange} 
      />
      <button type="submit">更新</button>
    </form>
  );
};

4. 排查数据加载时机 #

确认selectedIssueGroup的来源：

• 如果是父组件传递的，确保父组件在异步请求完成后再传递该数据，比如父组件里先显示加载状态，等数据返回后再渲染更新表单。
• 如果是表单组件自己请求数据，要在useEffect里发起请求，并且处理加载状态，避免在数据未返回时渲染表单。

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