React项目中Query参数传递的UUID未送达API问题求助

核心问题1：Daycard组件初始点击传递空ID #

你的Daycard组件中，id初始值为空字符串，useEffect是组件挂载后异步执行的。如果用户在组件刚渲染完成、useEffect还没执行完就点击卡片，此时传递的id就是空值，而非生成的UUID。

核心问题2：TaskFormPage依赖state存ID可能存在延迟 #

TaskFormPage用useEffect监听路由参数并更新state，但state更新是异步的，极端情况下onSubmit执行时id可能还没更新到最新值。

修复方案 #

1. 优化Daycard组件，确保初始ID就是UUID

不需要用useEffect生成ID，直接在useState初始化时生成，这样组件渲染时id就有值：

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { v4 as uuidv4 } from "uuid";

export function Daycard() {
    // 直接初始化生成UUID，无需useEffect
    const [id] = useState(uuidv4());
    const navigate = useNavigate();
    const handleClick = () => {
        navigate(`/tasks-create?id=${id}`);
    };

    return (
        <div
            onClick={handleClick}
            className="col pb-5 bg-light border border-dark"
            style={{ height: "73.33px" }}
        ></div>
    );
}

2. 简化TaskFormPage的ID获取逻辑，避免state延迟

直接在onSubmit时读取路由参数，跳过state存储，确保拿到的是最新的ID：

import { useForm } from "react-hook-form";
import { createTask } from "../api/task.api";
import { useNavigate, useLocation } from "react-router-dom";

export function TaskFormPage() {
  const location = useLocation();
  const { register, handleSubmit } = useForm();
  const navigate = useNavigate();

  const onSubmit = handleSubmit(async formdata => {
    // 直接在提交时获取路由参数里的ID
    const id = new URLSearchParams(location.search).get("id");
    const data = {
      id,
      ...formdata,
    };
    await createTask(data);
    navigate("/tasks");
  });

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="title"
          {...register("title", { required: true })}
          name="title"
        />
        <textarea
          rows="3"
          placeholder="description"
          {...register("description", { required: true })}
          name="description"
        ></textarea>
        <input
          type="datetime-local"
          placeholder="date"
          {...register("date", { required: true })}
        />
        <button>Create Task</button>
      </form>
    </div>
  );
}

3. 验证createTask函数的正确性

确认createTask函数在发送POST请求时，将data完整包含在请求体中，比如：

export async function createTask(taskData) {
  const response = await fetch("/your-api-endpoint", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(taskData), // 确保这里正确序列化了包含id的对象
  });
  return response.json();
}

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