Блог

Ошибка: Слишком много повторных рендеров. React ограничивает количество рендерингов, чтобы предотвратить бесконечный цикл. Как я могу это исправить, чтобы предотвратить бесконечный рендеринг?

Не ставьте ()=gt; в нескольких местах.

 export default function Test1() {  const [ref, inView] = useInView({ threshold: 0, triggerOnce: true });  const [num, setNum] = useState(10);  console.log(ref);   if (inView) {  setNum(num   10);  // console.log(num   10);  }   return (  lt;divgt;  lt;Diiv1gt;123lt;/Diiv1gt;  lt;Diiv2 ref={ref}gt;Element {inView.toString()}lt;/Diiv2gt;  lt;Diiv3gt;789lt;/Diiv3gt;  lt;/divgt;  ); } const Diiv1 = styled.div`  width: 100%;  height: 1500px;  background-color: blue; `;  const Diiv2 = styled.div`  width: 100%;  height: 1500px;  background-color: red; `;  const Diiv3 = styled.div`  width: 100%;  height: 1500px;  background-color: blue; `;    

Переместите это в эффект использования

 useEffect(()=gt;{  if (inView) {  setNum(num   10);  // console.log(num   10);  } },[num,ref])    

Обновление: на самом деле, вы должны это сделать:

 useEffect(() =gt; {  if (ref.threshold) {  setNum(num   10);  // console.log(num   10);  }  }, [ref,numb]);