React Todo应用添加任务后无法实时显示问题求助

核心问题分析 #

1. 状态更新格式错误：AddTask组件中更新todo列表时，直接添加了任务字符串而非完整的任务对象，导致TaskList渲染时无法读取todo.task属性。
2. 无效的无限循环副作用：Home组件中的useEffect会在todo变化时重复调用setTodo，引发无限循环，同时干扰状态正常更新。
3. 请求后处理不完整：POST请求未解析后端返回的新任务对象（包含自动生成的id），无法保证前端状态与后端数据结构一致。

修改后的代码实现 #

1. Home组件（移除无限循环的useEffect）

import { useState } from "react";
import { Link } from "react-router-dom";
import AddTask from "./AddTask";
import TaskList from "./TaskList";
import useFetch from "./useFetch";

const Home = () => {
  const {
    data: todo,
    setData: setTodo,
    isPending,
    error,
  } = useFetch("http://localhost:8000/tasks");

  return (
    <div className="home">
      <AddTask setTodo={setTodo} />
      {error && <div>Failed to fetch data.</div>}
      {isPending && <div>Loading...</div>}
      {todo && <TaskList todo={todo} setTodo={setTodo} />}
      <Link to="/trashbin" className="history">
        View History
      </Link>
    </div>
  );
};

export default Home;

2. AddTask组件（修复状态更新逻辑）

import { useState } from "react";

const AddTask = ({ setTodo }) => {
  const [task, setTask] = useState("");
  const [isPending, setIsPending] = useState(false);

  const handleClick = (e) => {
    e.preventDefault();
    setIsPending(true);
    const newTodo = { task };

    fetch("http://localhost:8000/tasks", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(newTodo),
    })
    .then(res => res.json()) // 解析后端返回的完整任务对象（包含id）
    .then(createdTodo => {
      setIsPending(false);
      setTodo(prev => [...prev, createdTodo]); // 添加完整对象到状态
      setTask(""); // 请求成功后再清空输入框
    })
    .catch(err => {
      console.error("添加任务失败:", err);
      setIsPending(false);
    });
  };

  return (
    <form className="new-task" onSubmit={handleClick}>
      <input
        className="input"
        type="text"
        required
        placeholder="Add new task..."
        value={task}
        onChange={(e) => setTask(e.target.value)}
      />
      <button className="add-task">
        <i className="fa-solid fa-plus fa-2x"></i>
      </button>
    </form>
  );
};

export default AddTask;

3. 额外注意

TaskList组件中handleDelete函数未定义，需补充实现才能正常使用删除功能，否则点击删除按钮会抛出错误。

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