React项目中API获取数据无法在表单显示的问题求助

核心问题1：初始状态类型不匹配 #

你把task的初始状态设成了数组[]，但接口返回的task是对象。组件首次渲染时，task.description为undefined，textarea的value为undefined就会显示为空，且不会触发报错（React允许textarea的value为undefined）。

修改初始状态为对象：

let [task, setTask] = useState({ description: "" });

核心问题2：setTask后立即console.log拿不到最新值 #

React的setState是异步操作，你在handleChange里直接打印task，输出的永远是更新前的旧值。如果要查看最新状态，可通过useEffect监听task变化：

useEffect(() => {
  console.log("当前task状态:", task);
}, [task]);

额外优化建议 #

• 给getTask添加错误处理，避免请求失败导致状态异常：

let getTask = async () => {
  if (taskId === "new") return;
  try {
    let response = await fetch(`/task/task/${taskId}/`);
    if (!response.ok) throw new Error("请求失败");
    let data = await response.json();
    setTask(data);
  } catch (err) {
    console.error("获取任务失败:", err);
  }
};

• updateNote需处理异步请求错误，且要等请求完成后再跳转页面，避免请求未发送完成就跳转：

let updateNote = async () => {
  try {
    await fetch(`/api/notes/${taskId}/`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(task),
    });
  } catch (err) {
    console.error("更新任务失败:", err);
  }
};

let handleSubmit = async () => {
  await updateNote();
  history.push('/');
};

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