javascript - 如何正确使用useEffect()？

Question

我想通过滚动来改变样式。

此代码无法正常工作。当我上下滚动太多次且太快时，浏览器就会卡住、崩溃。

我认为我使用了 useEffect() 错误。我该如何解决这个问题。

const ArticleItem = ({title, content, active, chapter, program, id, scrollPos}) => {
  const ref = useRef(null);
  const client = useApolloClient();

  useEffect(() => {
    if(ref.current.offsetTop <= (scrollPos + 200)) {
      client.writeData({data: {
        curChapter: chapter.num,
        curArticle: id,
        curProgram: program.name
      }});
    }
  });

  if(active === false)
    return ( // Inactive Article
      <div className='section-item' ref={ref}>
        <h2>{title.toUpperCase()}</h2>
        <ReactMarkdown source={content} />
        <br />
      </div>
    )
  return (  // Active Article
    <div className='section-item active' ref={ref}>
      <h2>{title.toUpperCase()}</h2>
      <ReactMarkdown source={content} />
      <br />
    </div>
  )
}

结果，我遇到了这个警告。

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

我认为这就是问题的原因？!

Answer 1

根据我上面的评论，您还需要包含 useEffect 的依赖项数组。以目前的方式，它是无限运行的。也许您想将 scrollPos 包含其中，因此只有在 scrollPos 发生变化时才会触发。

尝试以下操作:

useEffect(() => {
    if(ref.current.offsetTop <= (scrollPos + 200)) {
      client.writeData({data: {
        curChapter: chapter.num,
        curArticle: id,
        curProgram: program.name
      }});
    }
}, [scrollPos]);

希望这会有所帮助!