React中POST请求后如何触发useEffect更新任务列表？

核心问题 #

你的代码里useEffect只在组件首次挂载时执行一次，提交新任务后不会自动触发重新获取任务；同时handleSubmitForm完成POST请求后，没有主动更新本地的tasks状态，另外getTasks里还存在语法错误。

具体修复步骤 #

1. 修复getTasks的请求语法
   原代码里await ('/tasks/')缺少fetch方法，会导致请求失败，修改为：

const getTasks = async () => {
  const response = await fetch('/tasks/'); // 补上fetch方法
  const data = await response.json()
  setTasks(data);
};

2. 提交后主动刷新任务列表
   在handleSubmitForm的POST请求成功后，调用getTasks()重新拉取最新任务，同时清空输入框：

const handleSubmitForm = async (e) => {
  e.preventDefault(); // 阻止默认行为，避免页面刷新
  if (!task.trim()) return; // 过滤空内容提交

  try {
    await fetch("/tasks/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ title: task, completed: false }),
    });
    getTasks(); // 请求成功后更新任务列表
    setTask(""); // 清空输入框
  } catch (err) {
    console.error("添加任务失败：", err);
  }
};

3. 优化变量命名（可选但推荐）
   把任务渲染循环里的变量名从task改成taskItem，避免和输入框状态变量task冲突，提升代码可读性：

{tasks.map((taskItem) => (
  <li key={taskItem.id}>{taskItem.title}</li>
))}

修复后的完整代码 #

import React, { useEffect, useState } from "react";

const Tasks = () => {
  const [tasks, setTasks] = useState([]);
  const [task, setTask] = useState("");

  useEffect(() => {
    getTasks();
  }, []);

  const getTasks = async () => {
    const response = await fetch('/tasks/');
    const data = await response.json()
    setTasks(data);
  };

  const handleSubmitForm = async (e) => {
    e.preventDefault();
    if (!task.trim()) return;

    try {
      await fetch("/tasks/", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ title: task, completed: false }),
      });
      getTasks();
      setTask("");
    } catch (err) {
      console.error("添加任务失败", err);
    }
  };

  return (
    <ul>
      <div>
        <input
          onInput={(e) => setTask(e.target.value)}
          value={task}
          placeholder="输入任务标题"
        />
        <button onClick={handleSubmitForm}>Add</button>
      </div>
      {tasks.map((taskItem) => (
        <li key={taskItem.id}>{taskItem.title}</li>
      ))}
    </ul>
  );
};

export default Tasks;

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