函数在inView中的反应中调用无穷次

Question

未明错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。

import React, { useEffect, useRef } from 'react';

import { useNavigate } from 'react-router-dom';

import { useInView } from 'react-intersection-observer';


const About = () => {
  const navigate = useNavigate()
  
  const { ref, inView, entry } = useInView({
    
  });
  
 
  
    if(inView)  {navigate('/#about')}

  
  return (
    <div ref={ref}  className='about-container' id="about">
      
      
       
    </div>
  )
}

export default About

Answer 1

问题是您正在直接调用navigate('/#about')，这将导致该组件重新呈现的循环。解决办法可能是

import React, { useEffect, useRef } from 'react';

import { useNavigate } from 'react-router-dom';

import { useInView } from 'react-intersection-observer';


const About = () => {
  const navigate = useNavigate()
  
  const { ref, inView, entry } = useInView({
    
  });
  
   //when your `inView` value change, you change hash
   useEffect(() => {
      if(inView)  {navigate('/#about')}
   }, [inView])
  
    

  
  return (
    <div ref={ref}  className='about-container' id="about">
      
      
       
    </div>
  )
}

export default About

Answer 2

看起来你被困在一个无限循环中，因为这一行

if(inView)  {navigate('/#about')}

当About组件加载时，它会显示带有#about id的div，从而使它成为inView。这反过来会调用导航，这会使您一次又一次地到达#about div，一次又一次地重复。

根据我的理解，inView钩子应该用来记录度量指标，比如某人滚动超过某个点的频率，或者触发某种Javascript代码，比如当某人到达页面底部时显示一个模式。您可以始终使用它导航到一个新组件，而不是同一个组件。