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

【问题标题】：why is my useEffect not being called initially?为什么最初没有调用我的 useEffect ？
【发布时间】：2021-04-09 14:20:32
【问题描述】：

在我的功能性反应组件中，我的 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 没有被触发。

【问题讨论】：

最好的办法就是制作一个中间件组件来处理加载数据和最初获取数据。

标签： javascript reactjs react-redux react-hooks use-effect

【解决方案1】：

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

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

【讨论】：

制作两个useEffect
是的，可以做到，但由于他担心 useEffect 应该在第一次渲染时触发，那么这个 useEffect 将是解决方案。
将依赖项数组留空仅意味着它不会再次运行。与依赖列表相比，它不会导致它第一次运行。
他应该得到一个错误：React Hook useEffect has a missing dependency
然后使用两个单独的 useEffects 应该可以工作。

【解决方案2】：

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

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

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

【讨论】：

一个空的依赖列表意味着它只会在挂载时触发，而不是“只有当这个变量改变时”。
即使有依赖，useEffect 也是第一次触发。