React+GraphQL+Prisma中更新Mutation如何获取object.id

1. 先明确IssueGroup的TypeScript类型定义 #

首先要统一项目里的IssueGroup类型，避免类型推断混乱：

// types/IssueGroup.ts
export interface IssueGroup {
  id: string;
  name: string;
  // 补充你项目里的其他字段，比如description、createdAt等
}

2. 父组件管理选中状态与模态框显示 #

在IssueGroup列表所在的父组件中，用useState明确管理选中项和模态框状态，指定正确的类型约束：

import { useState } from 'react';
import { IssueGroup } from '../types/IssueGroup';
import UpdateIssueGroupForm from './UpdateIssueGroupForm';

const IssueGroupList = () => {
  // 初始值设为null，明确类型为IssueGroup | null
  const [selectedIssueGroup, setSelectedIssueGroup] = useState<IssueGroup | null>(null);
  const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false);

  // 点击更新按钮时，同步选中的IssueGroup并打开模态框
  const handleUpdateClick = (group: IssueGroup) => {
    setSelectedIssueGroup(group);
    setIsUpdateModalOpen(true);
  };

  return (
    <div>
      {/* 渲染IssueGroup列表 */}
      {issueGroups.map(group => (
        <div key={group.id}>
          <span>{group.name}</span>
          <button onClick={() => handleUpdateClick(group)}>编辑</button>
        </div>
      ))}

      {/* 更新模态框 */}
      {isUpdateModalOpen && (
        <UpdateIssueGroupForm
          selectedGroup={selectedIssueGroup}
          onClose={() => {
            setIsUpdateModalOpen(false);
            setSelectedIssueGroup(null); // 关闭时重置选中状态
          }}
        />
      )}
    </div>
  );
};

3. 表单组件处理选中值与类型校验 #

表单组件接收选中项作为props，明确props类型，通过useEffect同步表单初始值，同时处理空值场景：

import { useState, useEffect } from 'react';
import { useMutation } from '@apollo/client';
import { UPDATE_ISSUE_GROUP } from '../graphql/mutations';
import { IssueGroup } from '../types/IssueGroup';

// 明确表单组件的props类型
interface UpdateIssueGroupFormProps {
  selectedGroup: IssueGroup | null;
  onClose: () => void;
}

const UpdateIssueGroupForm = ({ selectedGroup, onClose }: UpdateIssueGroupFormProps) => {
  // 用Partial允许表单字段逐步填充，适配初始化场景
  const [formData, setFormData] = useState<Partial<IssueGroup>>({});

  // 选中项变化时，同步表单初始值
  useEffect(() => {
    if (selectedGroup) {
      setFormData({
        id: selectedGroup.id,
        name: selectedGroup.name,
        // 同步其他需要编辑的字段
      });
    }
  }, [selectedGroup]);

  const [updateIssueGroup] = useMutation(UPDATE_ISSUE_GROUP, {
    variables: {
      id: formData.id,
      name: formData.name
      // 其他更新参数
    },
    onCompleted: () => {
      onClose();
      // 这里可以添加缓存更新或列表刷新逻辑
    }
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.id) return; // 空值校验，避免无id的无效请求
    updateIssueGroup();
  };

  // 无选中项时不渲染表单，规避类型错误
  if (!selectedGroup) return null;

  return (
    <div className="modal">
      <form onSubmit={handleSubmit}>
        {/* 隐藏域存储id，也可以直接在mutation里用selectedGroup.id */}
        <input
          type="hidden"
          value={formData.id}
          onChange={(e) => setFormData({...formData, id: e.target.value})}
        />
        <input
          type="text"
          value={formData.name || ''}
          onChange={(e) => setFormData({...formData, name: e.target.value})}
          placeholder="分组名称"
        />
        {/* 其他表单字段 */}
        <button type="submit">更新</button>
        <button type="button" onClick={onClose}>取消</button>
      </form>
    </div>
  );
};

export default UpdateIssueGroupForm;

4. 常见TypeScript错误排查 #

• 遇到Object is possibly 'null'：在使用selectedGroup或formData前加非空判断（比如if (!selectedGroup) return null），或用可选链selectedGroup?.id。
• 表单类型不匹配：确保formData的类型和IssueGroup对齐，用Partial<IssueGroup>适配表单初始化时的部分字段为空场景。
• GraphQL变量类型错误：检查Mutation定义的变量类型，和Prisma模型的IssueGroup字段类型保持一致（比如id是ID还是String）。

额外提示 #

如果用Formik、React Hook Form这类表单库，直接把selectedGroup作为初始值传入即可，类型处理逻辑类似，比如React Hook Form的defaultValues可以设为selectedGroup || {}。

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