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

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

这是下面的钩子

从“react”导入{useState，useffect}；
从“react redux”导入{useDispatch，useSelector}；
const useFetch=（url、选项、操作类型、数据类型）=>{
const[response，setResponse]=useState（[]）；
const dispatch=usedpatch（）；
useffect（（）=>{
（异步（）=>{
const res=等待获取（url）；
const json=await res.json（）；
setResponse（json）；
})();
}, []);
useffect（（）=>{
分派（{有效负载：响应，类型：actionType}）；
}[答复]；
const data=useSelector（state=>state[dataType]）；
返回数据；
};
导出默认useFetch；

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

constparentcomment=（{comment}）=>{
const handleshowmorereplays=（e）=>{
e、 预防默认值（）；
}
让回复=useFetch(
`/api/comment\u回复？comment\u id=${comment.id}`，
无效的
“收到的答复”，
“答复”
);
返回(
{reply.map（reply=>(
))}
);
};

---

如果我将

useFetch

call放在处理程序中，我会导致一个错误，即无法在那里调用hook，但我只需要在单击按钮时调用它，因此我不知道是否有方法实现它。

我认为您的useFetch hook存在一些微妙的问题

1.useEffect具有需要定义的${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，并重新加载它

这是一篇相关文章

---

谢谢！如果我将

null

作为url的初始值传递，则此操作有效

js const[data，fetchUrl]=useFetch（null，null，“收到的回复”、“回复”）如果我传递了正确的url，因为它位于顶层，每个回复都会立即呈现，但是如果它为空，则url仅在单击时设置。再次感谢！