父组件在反应中重新渲染多次

Question

我想在用户到达页面底部时向服务器发送请求，我试图将一些附加数据发送到服务器作为限制并跳过，我调用了 scrollNo（这是一个状态) 和 POSTS_PER_SCROLL （这是一个正常值），我的问题是当我想将请求发送到服务器时，scrollNo 在这个组件（父）中多次更改（多次重新渲染），如何避免这些多重渲染以防止多个请求？

const POSTS_PER_SCROLL = 6;

const Posts = () => {
  const [scrollNo, setScrollNo] = useState(1);
  const [transitionData] = useHttp();
  const [posts, getPosts] = usePosts();
  const authContext = useContext(AuthContext);
  const { getPsts } = useContext(PostContext);

  const getAllPosts = useCallback(async () => {
    try {
      const responseData = await transitionData(
        `http://localhost:5000/post/${authContext.userId}/posts?quantity=${POSTS_PER_SCROLL}&scrollNo=${scrollNo}`
      );

      getPosts(responseData);  // change the state
      getPsts(responseData);  // change the state
    } catch (error) {}
  }, [transitionData, authContext.userId, getPosts, getPsts, scrollNo]);

  useEffect(() => {  // this useEffect runs after initilize the component (just once)
    (async () => {
      if (
        authContext.userId &&
        authContext.token &&
        Object.getOwnPropertyNames(posts).length === 0
      ) {
        try {
          await getAllPosts();
        } catch (error) {}
      }
    })();
  }, [authContext.userId, authContext.token, getAllPosts, posts]);

  useEffect(() => {  // this useEffect runs by scrolling (every time reach to bottom of page)
    const scrollToGetPosts = async () => {
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
        setScrollNo(prevState => prevState + 1);  // change the state when the user reach to bottom of page

        try {
          await getAllPosts();
        } catch (error) {}
      }
    };

    window.addEventListener("scroll", scrollToGetPosts);
    return () => window.removeEventListener("scroll", scrollToGetPosts);
  }, [getAllPosts]);
};

export default Posts;

在控制台中：

Answer 1

useEffect 第二个参数有问题。

您的代码需要重构 - 我建议将 api 调用单独调用到单独的函数中，而不是在 UseEffect 中调用它们 -> 有助于稍后分析异步代码。

还有 2 调用 useEffect 不是好的做法。

---

如果您从 useEffect 中删除 getAllPosts - 它不应该被多次调用 - 会导致无限循环

欲了解更多信息，请阅读这篇文章：

https://dev.to/nibble/what-is-useeffect-hook-and-how-do-you-use-it-1p9c