React自定义usePostQuery Hook无法返回POST请求结果问题

核心问题 #

你的代码里有两个关键问题导致拿不到最新的responseData和loading状态：

1. React状态更新的异步性：调用callPost后立刻访问loading和responseData，拿到的是当前渲染周期的旧值——因为setState是异步操作，不会同步更新状态变量。
2. useEffect依赖数组不完整：当前的useEffect只监听了draftMessage和myMessage，但内部用到了callPost、loading、responseData这些变量，闭包会捕获它们的旧值，即使状态更新，这个useEffect也不会重新执行，自然看不到新状态。

修复步骤 #

1. 补全useEffect的依赖数组

把useEffect用到的所有外部变量都加入依赖数组，确保状态更新时能触发重新执行：

useEffect(() => {
  if (draftMessage && myMessage) {
    console.log("post my message to server");
    callPost({
      message: myMessage,
      author: "Mo"
    });
  }
}, [draftMessage, myMessage, callPost]); // 加入callPost

2. 单独监听状态变化处理后续逻辑

不要在调用callPost的同一个useEffect里立刻判断状态，新增一个useEffect专门监听loading和responseData的变化，执行清空消息的操作：

useEffect(() => {
  // 当请求完成（loading变为false）且有响应数据时，清空输入
  if (!loading && responseData) {
    setMyMessage("");
    setdraftMessage(false);
    console.log("after ", responseData);
  }
  console.log("responseData ", responseData);
}, [loading, responseData]); // 监听loading和responseData的变化

额外优化（可选） #

如果需要在调用callPost后直接拿到返回结果，也可以让callPost函数返回请求的结果：

// 在usePostQuery里修改callPost
const callPost = useCallback( async (data: bodyData) => {
    try {
      setLoading(true);
      const response = await fetch(url, { 
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          title: data.message,
          userId: 15
        })
      });
      const jsonResult = await response.json();
      console.log('--------jsonResult---------');
      console.log(jsonResult)
      setResponseData(jsonResult);
      return jsonResult; // 返回结果
    } catch (error: any) {
      setError(error.message);
      throw error; // 抛出错误方便外部捕获
    } finally {
      setLoading(false);
    }
  },
  [url]
);

// 调用时可以用async/await直接获取结果
useEffect(() => {
  const handlePost = async () => {
    if (draftMessage && myMessage) {
      console.log("post my message to server");
      try {
        const result = await callPost({
          message: myMessage,
          author: "Mo"
        });
        console.log("请求结果:", result);
      } catch (err) {
        console.error("请求失败:", err);
      }
    }
  };
  handlePost();
}, [draftMessage, myMessage, callPost]);

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