Блог

Имея следующий код:

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

function UseEffectComp1() {
    const [count, setCount] = useState(0);
    const [mounted, setMounted] = useState(false);

    useEffect(() => {    
        if (mounted)
            setMounted(false);
        else
            setMounted(true);
    });

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => {
                    mounted ? console.log("mounted") : console.log("not mounted");
                }
                }>
                Click me
            </button>
        </div>
    );
}

export {UseEffectComp1}
 

У меня возникает проблема с бесконечным циклом.
Что в этом плохого и как заставить это работать?

 useEffect(() => {    
  if (mounted)
    setMounted(false);
  else
    setMounted(true);
},[]);
 

причина в том, что каждый раз, когда вы звоните setMounted useEffect , вам будут звонить. таким образом, значение mounted изменения между true и false . следовательно, вы сталкиваетесь с проблемой бесконечного цикла