javascript - 如何在事件处理程序中使用自定义 Hook ？

Question

我创建了一个自定义 Hook，它从服务器获取数据，向商店发送调度并返回数据。如果我想在我的应用程序中列出所有评论，它是有用的，但是，我想在我需要获取所有评论回复的组件中重用它，并且只有在单击特定按钮时才会发生这种情况。

这是下面的钩子(Hook)。

import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

const useFetch = (url, options, actionType, dataType) => {
  const [response, setResponse] = useState([]);

  const dispatch = useDispatch();
  useEffect(() => {
    (async () => {
      const res = await fetch(url);
      const json = await res.json();
      setResponse(json);
    })();
  }, []);

  useEffect(() => {
    dispatch({ payload: response, type: actionType });
  }, [response]);
  const data = useSelector(state => state[dataType]);

  return data;
};

export default useFetch;

在我的组件内部，我需要在单击按钮时获取回复

const ParentComment = ({ comment }) => {
  const handleShowMoreReplies = (e) => {
    e.preventDefault();

}
  let replies = useFetch(
    `/api/comment_replies?comment_id=${comment.id}`,
    null,
    "REPLIES_RECEIVED",
    "replies"
  );
  return (
    <div>
      <Comment comment={comment} />
      <div className="replies">
        {replies.map(reply => (
          <Comment key={reply.id} comment={reply} />
        ))}
          <a href="#" className="show_more" onClick={handleShowMoreReplies}>
            Show More Replies ({comment.replies_count - 1})
          </a>
      </div>
    </div>
  );
};

如果我将 useFetch 调用放在处理程序中，我会收到一个错误，指出无法在那里调用 Hooks，但我只需要在单击按钮时调用它，所以我不知道如果有办法实现它。

Answer 1

我认为你的 useFetch 钩子(Hook)有一些微妙的问题

1.您的 useEffect 具有您需要定义的 ${url} 和 ${actionType } 的 dep。

2.为了通过点击按钮调用这个钩子(Hook)，你需要暴露setUrl如下

const useFetch = ( initialUrl, options, actionType, dataType) => {
  const [url, setUrl ] = useState(initialUrl);

  const dispatch = useDispatch();
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url);
        const data = await res.json();
        dispatch({ payload: data, type: actionType });
      } catch (error) {
       console.log(error);
      }
    };
    fetchData();
  }, [url, actionType]);

  const data = useSelector(state => state[dataType]);
  return [ data, setUrl ];
};

export default useFetch;

然后当你尝试使用这个钩子(Hook)时，你可以

const [data, fetchUrl] = useFetch(
  `/api/comment_replies?comment_id=${comment.id}`,
  null,
  "REPLIES_RECEIVED",
  "replies"
);

然后每次你有一个按钮你可以简单地调用

fetchUrl(${yourUrl}). 

您的 Hook 将接收新的 URL，这是您的 Hook 的 dep 并重新呈现它。

这是一篇相关文章 https://www.robinwieruch.de/react-hooks-fetch-data