仅在重新渲染组件时才反应状态更新

Question

我试图在每次调用 handleScroll() 时将 React 状态 setMoviesPage 的值增加 1。 我面临的问题是状态 setMoviesPage 仅更新组件重新呈现（通过导航到不同的 url 并返回）。

这是我的代码：

  const [moviesPage, setMoviesPage] = useState(1);


  async function handleScroll() {
    if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight) return;
    await setIsFetching(true);
    setMoviesPage(moviesPage + 1);
  }

  useEffect(() => {
    if (!isFetching) return;
    fetchMovies(String(moviesPage))
    .then(prevState => updateMovies([...prevState]))
    .catch(() => updateMovies([]));
    
    setIsFetching(false);   
  }, [isFetching, setIsFetching, moviesPage, updateMovies]);

如何解决？谢谢

Answer 1

问题

似乎在获取电影完成后，您只需覆盖现有状态。

fetchMovies(String(moviesPage))
  .then(prevState => updateMovies([...prevState])) // <-- overwrite state
  .catch(() => updateMovies([]));

使用函数组件和useState 挂钩，状态更新不会与现有状态合并，您必须 手动管理。

注意

与类组件中的setState 方法不同，useState 不会自动合并更新对象。你可以复制这个 通过将函数更新器形式与对象传播相结合的行为 语法：

const [state, setState] = useState({});
setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

解决方案

更新滚动处理程序中的moviesPage 值

function handleScroll() {
  if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight) return;
  setMoviesPage(moviesPage + 1);
}

将获取逻辑分解为实用函数。使用功能状态更新从以前的状态进行更新，追加新数据到 new 数组引用。将加载状态的重置移入 Promise 链，使其在链的末尾正确重置，否则它只会取消开始加载的真实更新。 p>

const fetchNextMoviesPage = (page) => {
  if (!isFetching) {
    setIsFetching(true); // <-- start loading
    fetchMovies(String(page))
      .then(nextPage => {
        updateMovies(movies => movies.concat(nextPage)); // <-- append next page
      })
      .catch(() => updateMovies([]))
      .finally(() => setIsFetching(false)); // <-- end loading
  }
};

useEffect(() => {
  fetchNextMoviesPage(moviesPage); 
}, [moviesPage]);

Answer 2

当第一次查看你的代码时，我真正想告诉你的是你的 useEffect 似乎不是最佳实践。

这里我给你修改了一下，结构更好。

const fetchMovie = () => {
   setIsFetching(true)
   fetchMovies(String(moviesPage))
    .then(prevState => updateMovies([...prevState]))
    .catch(() => updateMovies([]));
   setIsFetching(false)
}

useEffect(() => {
   fetchMovie
}, [moviesPage]);

请注意，您只需要添加依赖项数组即可使用所有更改的值来触发您在其中的操作。有时 linter 也会给你一些误报警告。

希望这个答案可以帮助您解决问题。