const [label, setLabel] = useState([<>, <>]); const [labelType, setLabelType] = useState('none'); useEffect( () => { if (props.label === 'label1') { setLabel([<div>...</div>, <div>...</div>]) } if (props.label=== 'label2') { setLabel([<div>...</div>, <div>...</div>]); } if (props.label === 'label3') { setLabel([<div>...</div>, <div>...</div>]) } }, [labelType] ); setLabelType(props.label) return ( <div className=''> <div id=''>{label}</div> </div> )

Así que básicamente estoy pasando un accesorio y solo tratando de usar ese valor para decidir en qué configurar mi {etiqueta} y el valor inicial de props.label es 'label1'. Si mi consola inicia sesión, veo que 'ninguno' se cambia a 'label1' por setLabelType(props.label) y tengo entendido que, dado que se usó setLabelType(), el componente indicado se actualiza/se vuelve a representar y más labelType específicamente es cambiado, luego se activa useEffect() y se llama a la rama/setLabel() apropiada en función de los accesorios. El siguiente render useEffect() no se llama ya que 'label1' -> 'label1' no cambia (frente a la primera vez 'none' -> 'label1').

Pero la realidad es que tengo un bucle infinito en su lugar, ¿alguien podría explicarme por qué? Creo que tal vez necesito tener setLabelType (props.label) en una función, pero el activador para que se ejecute este código está en un componente diferente, por lo que no hay un accesorio 'onChange' que lo llame en este componente (básicamente cuando se hace clic en el componente hermano , pasa los datos al padre común, el padre vuelve a pasar los datos a este hijo y usa el accesorio para decidir el renderizado). Esto parece muy simple, pero estoy confundido.

Gracias