为什么最初没有调用我的useEffect

Question

在我的函数式react组件中，我的useEffect钩子不会在初始渲染和抛出错误时被调用，但如果我不断刷新，它就会正常工作。我找不到解决办法。

function useQuery() {
return new URLSearchParams(useLocation().search);
}
function WatchMain({ watchVideo, videos, setLoading, fetchVideoById }) {
let query = useQuery();
let id = query.get("v");
const setTitle = (id) => {
videos.forEach((video) => {
if (video.id.videoId === id) {
document.title = video.snippet.title;
}
});
};
useEffect(() => {
console.log("in use effect");
setTitle(id);
setLoading();
fetchVideoById(id);
}, [id]);
return (
<WatchMainContainer>
{!watchVideo ? <Loading src={loadersvg} alt="loading" /> : <VideoData />}
</WatchMainContainer>
);
}
const mapStateToProps = (state) => ({
watchVideo: state.videos.watchVideo,
videos: state.videos.videos,
});
export default connect(mapStateToProps, { setLoading, fetchVideoById })(
WatchMain
);

我已经排除了进口

我正在使用useQuery来解析查询参数id。我的url是这样的http://localhost:3000/watch?v=1GQ9mH5Zzr0id可以在日志中看到。但是useEffect没有被激发。

Answer 1

如果你想在第一次渲染中触发useEffect，那么不要在useEffect数组中使用任何依赖项，这样做：

useEffect(() => {
console.log("in use effect");
setTitle(id);
setLoading();
fetchVideoById(id);
}, []);

Answer 2

您的组件在初始渲染时不会被调用，因为您传递了一个"id"；要使用的参数Effect:

useEffect(() => {
...
}, [id]);

当您在[]中传递变量时，只有当该变量发生更改时，useEffect才会触发。它就像一个组件DidUpdate。只要移除它，它就会在每次渲染时触发。