Soy prácticamente completamente nuevo en React. Leí la documentación y vi algunos videos de YT. Ahora estoy tratando de 'convertir' parte de este componente de la clase React que encontré en línea en un componente funcional. Esto es lo lejos que he llegado:Mi componente funcional (codesandbox) .
Es un componente para envolver automáticamente texto SVG usando elementos tspan basados en un campo de entrada del usuario.
Específicamente, estoy teniendo dificultades con el gancho useEffect. Según tengo entendido, debería funcionar como el equivalente de componentWillMount y componentDidUpdate . Ahora tengo todo prácticamente configurado, pero aún no actualiza el componente Text cada vez que se agrega texto nuevo en el área de texto. Creo que esto se debe a que tengo que hacer algo en el gancho useEffect en el componente Text :
useEffect(() => { //something so that lines get updated if the user input changes? }, [lines]);Las cosas que probé dieron como resultado un bucle infinito. Ver: ¿Puedo usar set state dentro de un gancho useEffect ?
¿Podría alguien señalarme en la dirección correcta? Siéntase libre de bifurcar los códigos y caja :)
En primer lugar, useEffect no es como componentWillMount, es componentDidMount: los efectos se activan después de un renderizado.
En segundo lugar, en su ejemplo específico, lo que desea es activar un efecto cuando dummyText se actualice para que pueda volver a calcular las líneas.
Para hacer eso, su efecto se ve así:
useEffect(() => { //something so that lines get updated if the user input changes? }, [dummyText]); En tercer lugar, y lo más importante, tampoco debe hacer eso porque las lines no son realmente el estado de su componente de Text , es solo un valor calculado basado en la propiedad dummyText . state es algo que posee su componente, algo que ha creado. Su componente de Text no creó líneas, simplemente las calculó en función de la propiedad dummyText .
En su componente de Text , su función useEffect no rastrea la propiedad dummyText . Intente agregarlo a la matriz de dependencias, así (Text.jsx, línea 60):
useEffect(() => { const { wordsWithComputedWidth, spaceWidth } = calculateWordWidths(); const lines2 = calculateLines(wordsWithComputedWidth, spaceWidth, 400); setLines(lines2); }, [dummyText]);