时间戳

首页 > 解决方案 > 我的 useEffect 正在到达调用堆栈，并且在文本更改后，我不知道为什么？

javascript - 我的 useEffect 正在到达调用堆栈，并且在文本更改后，我不知道为什么？

问题描述

我想在文本更改后触发回调，基本上这是用于搜索。我的代码：

const fetchMovies = useCallback(async () => {
    console.log('fetchMovies api ');
    const {Search} = await fetch(
      `http://www.omdbapi.com/?apikey=${apiKey}&s=${text}&page=${page}`,
    ).then(data => data.json());
    console.log('movies', Search);
    return Search;
  }, [page, text]);

  useEffect(() => {
    console.log('useEffect!');
    if (timeout) {
      clearTimeout(timeout);
    }
    if (text) {
      const newTimeout = setTimeout(async () => {
        dispatch(fetchMoviesRequest('fetch'));
        console.log('fetch!1');
        try {
          const moviesResult = await fetchMovies();
          console.log('fetch!2', moviesResult);
          dispatch(fetchMoviesSuccess(moviesResult));
        } catch (fetchError) {
          console.log('fetch!3e', fetchError);
          dispatch(fetchMoviesFailure(fetchError));
        }
      }, 2000);
      dispatch(onSetTimeout(newTimeout));
    }
    return () => {
      clearTimeout(timeout);
    };
  }, [fetchMovies, text, timeout, page]);

不知何故，我无法弄清楚是什么原因导致它只在文本更改后才应该重新渲染时重新渲染？我只能输入 1 个字母并且应用程序因最大调用堆栈错误而崩溃？

标签： javascriptreactjsreact-hooks

解决方案

我不确定您的 useEffect 依赖项数组中的其他变量的值是什么，但对我来说可疑的是您将其timeout作为依赖项之一。

我有预感，说这条线onSetTimeout(newTimeout)会改变timeout变量的值，这将重新触发这个useEffect。这将创建一个无限循环，因为每次timeout更改时效果都会运行。

推荐阅读