如何将自定义挂钩与事件处理程序一起使用？

Question

我已经创建了一个自定义钩子，它从服务器获取数据，向存储发送分派，并返回数据。如果我想在我的应用程序中列出所有评论，它是可用的，但是，我想在我需要获取所有评论回复的组件中重用它，而这应该只在单击某个按钮时发生。

这是下面的钩子。

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>
  );
};

如果我把useFetchcall放在处理程序中，我会得到一个错误，不能在那里调用hook，但是我只需要在单击按钮时调用它，所以我不知道是否有办法实现它。

Answer 1

我认为你在使用上有一些微妙的问题

1.your使用效果是需要定义的${url}和${actionType}的dep。

2.为了通过单击按钮调用这个钩子，您需要公开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;

当你试图使用这个钩子时，你可以

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

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

fetchUrl(${yourUrl}). 

您的钩子将收到新的URL，这是钩子的dep，并重新加载它。

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