在組件中呼叫自定義React異步鉤子并再次查看它的狀態

我有一個自定義的反應鉤子從一個看起來像這樣的 API 獲取評論數量：

export async function useFetchNumberOfComments(articleId) {
  const [numberOfComments, setNumbeOfComments] = useState(0);

  useEffect(() => {
    (async () => {
      try {
        const response = await axios.get(`https://example.com/${articleId}`, {
          headers: {
            "Content-Type": "application/json",
            "X-API-KEY": "X",
            Authorization: localStorage.getItem("access_token"),
          },
        });

        const data = await response.data;

        setNumbeOfComments(data);
      } catch (err) {
        console.log(err);
      }
    })();
  }, []);

  return numberOfComments;
}

我想在一個看起來像這樣的文章組件中使用它：

import { useFetchNumberOfComments } from "../utils";

const SingleArticle = () => {
  let { id } = useParams();
  // Important state
  const [numOfComments, setNumOfComments] = useState(0);
  // Not important states
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  const [content, setContent] = useState("");
  const [comments, setComments] = useState([]);
  const [commentAuthor, setCommentAuthor] = useState("");
  const [commentContent, setCommentContent] = useState("");
  const [imageId, setImageId] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [createdAt, setCreatedAt] = useState();

  const postComment = async (e) => {
    e.preventDefault();

    const dataToSend = {
      articleId: id,
      author: commentAuthor,
      content: commentContent,
    };

    try {
      await axios.post(`https://example.com/comments`, dataToSend, {
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "X",
          Authorization: localStorage.getItem("access_token"),
        },
      });

      
      // Here, fetch the number of comments from my custom hook and update numOf Comments in this component
      setCommentAuthor("");
      setCommentContent("");
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
      <form onSubmit={postComment}>
        // Here are some inputs, labels and a submit button
      </form>  
      <h4 className={styles.h1}>Comments({numOfComments})</h4>
    </>
  );
};

export default SingleArticle;

現在，問題是我不知道如何在 Article 組件中執行上述活動：發送表單資料（用于評論）后，觸發useFetchNumberOfComments自定義鉤子并將numOfCommentsarticle 組件內的狀態設定為新獲取的資料。

uj5u.com熱心網友回復：

我認為你最好重構useFetchNumberOfComments鉤子以回傳一個獲取函式和一些獲取請求元資料，即加載和回應以及錯誤狀態。

例子：

export function useFetchNumberOfComments() {
  const [numberOfComments, setNumbeOfComments] = useState(0);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchArticleCommentCount = useCallback(async (articleId) => {
    setLoading(true);
    try {
      const response = await axios.get(`https://example.com/${articleId}`, {
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "X",
          Authorization: JSON.parse(localStorage.getItem("access_token")),
        },
      });

      const data = await response.data;

      setNumbeOfComments(data);
      setError(null);

      return data;
    } catch (err) {
      console.log(err);
      setError(err);
    } finally {
      setLoading(false);
    }
  }, []);
  
  return {
    fetchArticleCommentCount,
    numberOfComments,
    loading,
    error
  };
};

...

import { useFetchNumberOfComments } from "../utils";

const SingleArticle = () => {
  const { id } = useParams();

  const {
    fetchArticleCommentCount,
    numberOfComments,
  } = useFetchNumberOfComments();

  // Important state
  const [numOfComments, setNumOfComments] = useState(0);

  // Not important states
  ...

  const postComment = async (e) => {
    e.preventDefault();

    const dataToSend = {
      articleId: id,
      author: commentAuthor,
      content: commentContent,
    };

    try {
      await axios.post(`https://example.com/comments`, dataToSend, {
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "X",
          Authorization: localStorage.getItem("access_token"),
        },
      });

      // await returned comment count and update local state
      const commentCount = await fetchArticleCommentCount(id);
      setNumOfComments(commentCount);

      // or use the updated numberOfComments value returned from hook
      fetchArticleCommentCount(id);
      // both are available, but you only need one or the other here

      setCommentAuthor("");
      setCommentContent("");
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
      <form onSubmit={postComment}>
        // Here are some inputs, labels and a submit button
      </form>  
      <h4 className={styles.h1}>Comments({numberOfComments})</h4>
    </>
  );
};

export default SingleArticle;

標籤：javascript 反应 反应钩子

上一篇：同一按鈕上的Javascript連續單擊事件以更改css

下一篇：如何在反應中將文本更改為輸入欄位onclick？