React 自定義掛鈎不給出 POST 結果

Question

客戶掛鈎發布方法工作正常，同時響應添加 state 需要時間。

console.log(jsonResult)

同時顯示POST方法的responseData顯示null

使用PostQuery

import { useCallback, useState } from "react";

interface bodyData {
  message: string,
  author: string
}

const usePostQuery = (url: string, data?: bodyData )=> {
  const [responseData, setResponseData] = useState();
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState('');

  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);
      } catch (error: any) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    },
    [url]
  );

  return { responseData, loading, error, callPost };
};

export default usePostQuery;

const { responseData, loading, error, callPost } = usePostQuery('https://jsonplaceholder.typicode.com/posts')

responseData沒有給出呼叫后響應

  useEffect(() => {
    if (draftMessage && myMessage) {
      // submitNewMessage()
      console.log("post my message to server");
      callPost({
        message: myMessage,
        author: "Mo"
      });
      if (loading === false) {
        setMyMessage("");
        setdraftMessage(false);
        console.log("after ", responseData);
      }
      console.log("responseData ", responseData);
    }
  }, [draftMessage, myMessage]);

提取成功，因為側提取響應中的控制台顯示 API 響應。

Answer 1

您的自定義掛鈎沒有任何問題。 問題出在您的效果掛鈎中。

它僅在其依賴項發生變化時觸發，即draftMessage和myMessage 。 它不會重新評估loading或responseData ，因此只會在觸發時看到它們的狀態。

真的不清楚您將draftMessage state 用於什么目的。 相反，我只會在您的提交處理程序中觸發callPost ...

export default function App() {
  const [myMessage, setMyMessage] = useState("");

  const { responseData, loading, callPost } = usePostQuery(
    "https://jsonplaceholder.typicode.com/posts"
  );

  const handleMyMessage = (val) => {
    setMyMessage(val);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    await callPost({ message: myMessage, author: "Mo" });
    setMyMessage("");
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <ChatForm
          onChange={handleMyMessage}
          myMessage={myMessage}
          handleSubmit={handleSubmit}
        />
      )}
      <pre>responseData = {JSON.stringify(responseData, null, 2)}</pre>
    </div>
  );
}

您的掛鈎控制loading和responseData數據狀態，因此您的組件幾乎沒有什么可做的。