Tengo el siguiente componente simple en el que solo busco establecer un valor al principio.
Por lo tanto, tratando de establecer el valor dentro useEffect .
He simplificado el componente para que sea mínimo aquí.
Mientras intento establecer el valor a través de useState , arroja el siguiente error.
Error: demasiados renderizados. React limita el número de renderizaciones para evitar un bucle infinito.
No es la función externa. El problema es usar el useState setter en sí mismo, ya que incluso establecerlo en verdadero arroja el mismo error.
¿Por qué es esto un problema?
Si trato de hacer un contador aquí, solo ingreso useEffect una vez cuando comento setValid .
Pero si llamo a setValid, ingreso useEffect unas 25 veces antes de cometer un error.
¿Cómo podría corregir este problema? Necesito establecer este valor a través de useState para usarlo más abajo en el componente. Por favor aconséjame.
Código:
export const MyComponent = () => { const [valid, setValid] = React.useState(undefined); React.useEffect(() => { setValid(externalFunction()); // setValid(true); // same error }, []); return <MyComponent />; };Esto funciona bien cuando lo ejecuto. El error proviene de ejecutar la siguiente prueba.
import { shallow } from 'enzyme'; const render = (props) => shallow( <MyComponent {...props} /> ); it('should render', () => { const renderedModule = render(); expect(renderedModule).toMatchSnapshot(); });El ejemplo dado no provoca una renderización recursiva. Vea este arenero .
Sin embargo, si necesita establecer el valor inicial de un estado en un valor de retorno de función, setState puede tomar una función para solicitar su valor inicial:
export const MyComponent = () => { const [valid, setValid] = useState(externalFunction); // Or more verbosely: // const [valid, setValid] = useState(() => externalFunction()); return <div>test</div>; };