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

Question

我创建了一个自定义 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钩子中存在微妙的问题

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

2.In 通过单击按钮调用此钩子，您需要公开 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