React+GraphQL Todo应用编辑页问题：无法显示标题及跳转

问题1：编辑页面输入框无法显示Todo Title #

你的EditTodo组件存在两个关键问题：一是title状态初始为空，未同步GraphQL查询返回的Todo数据；二是缺少对查询loading和error状态的处理，直接访问data.todo可能引发报错（比如数据未加载完成时data为undefined）。

修复代码（EditTodo.js） #

import { useState, useEffect } from 'react';
import { useQuery, useMutation } from '@apollo/client';
import { useParams, useNavigate } from 'react-router-dom';
import { GET_TODO, EDIT_TODO, GET_TODOS } from './your-queries-path'; // 替换为你的查询文件路径

const EditTodo = () => {
  const [title, setTitle] = useState("");
  const { id } = useParams();
  const navigate = useNavigate();

  // 新增loading、error状态处理
  const { data, loading, error } = useQuery(GET_TODO, {
    variables: { id }
  });

  // 监听查询数据，同步到title状态
  useEffect(() => {
    if (data?.todo?.title) {
      setTitle(data.todo.title);
    }
  }, [data]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>加载Todo失败！</p>;

  // 修正mutation配置，移除提前传入的variables
  const [editTodo] = useMutation(EDIT_TODO, {
    refetchQueries: [{ query: GET_TODOS }], // GET_TODOS无需id变量，删除多余配置
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    // 按mutation要求传入正确格式的变量
    editTodo({ variables: { id, title } })
      .then(() => navigate('/')) // 编辑成功后跳转首页
      .catch(err => console.error('编辑失败:', err));
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <div>
          <input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            required
            type="text"
            placeholder="Name"
          />
        </div>
        <div>
          <button type="submit">
            保存编辑
          </button>
        </div>
      </div>
    </form>
  );
};

export default EditTodo;

问题2：编辑完成后跳转到首页 #

上面的修复代码中，通过editTodo返回的Promise的then方法实现跳转，确保只有当mutation成功执行后才会跳转到首页。你也可以改用mutation的onCompleted回调实现：

const [editTodo] = useMutation(EDIT_TODO, {
  refetchQueries: [{ query: GET_TODOS }],
  onCompleted: () => navigate('/') // 成功后自动跳转
});

额外修正点 #

• 原代码中editTodo(title)调用方式错误，必须传入包含id和title的variables对象
• refetchQueries中的GET_TODOS无需传递id变量，因为它是查询全部Todo的接口
• 移除了原代码中多余的{data.todo.title}展示，避免重复内容

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