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

如何解决为什么我的 useEffect 最初没有被调用？

在我的功能性反应组件中，我的 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。 我的网址看起来像这样 http://localhost:3000/watch?v=1GQ9mH5Zzr0 id 可以在日志中看到。但 useEffect 没有被触发。

解决方法

如果您希望 useEffect 在第一次渲染时触发，则不要在 useEffect 数组中使用任何依赖项，请执行以下操作：

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

,

您的组件在初始渲染时未被调用，因为您向 useEffect 传递了一个“id”参数：

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

当你在 [ ] 中传递一个变量时，useEffect 只会在这个变量发生变化时触发。它就像一个 componentDidUpdate。只需删除它，它就会在每次渲染时触发。