Я думаю, у вас есть тонкие проблемы в вашем хуке useFetch
1.В вашем useEffect есть dep $ {url} и $ {actionType}, которые вам нужно определить.
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, который является депо вашего хука, и перерисовывал его.
Вот статья по теме https://www.robinwieruch.de/react-hooks-fetch-data