Supongamos que tengo un componente React (componente funcional ) y estoy pasando múltiples accesorios. Uno de estos accesorios es un objeto anidado como...
Ejemplo de objeto anidado
const user = { id: 101, email: 'jack@dev.com', personalInfo: { name: 'Jack', address: { line1: 'westwish st', line2: 'washmasher', city: 'wallas', state: 'WX' } } }Para simplificar, quiero pasar todo el objeto, pero en lugar de acceder a él a través de user.personalInfo.adress.line1 , me gustaría guardarlo en variable.
Lo estoy pasando al siguiente componente...
Ejemplo de componente de reacción
const ExampleComponent = (props) => { // Example 1 const [state1, setState1] = useState(); useEffect(() => { setState1(user.personalInfo.adress.line1); }) // Example 2 const state1Var = user.personalInfo.adress.line1 }Sé que guardar apoyos en los estados es una mala práctica . (= Ejemplo 1) Entonces, ¿cuál es la forma más inteligente de hacerlo? ¿Guardarlo en una variable de clase? (= Ejemplo2)
No necesitas un estado para esto. Simplemente puede desestructurar el objeto en el renderizado de componentes.
Nota: el uso useEffect sin la variable de dependencia volverá a activar la función de devolución de llamada en cada procesamiento. Será un problema de memoria useEffect(() => {},[]) .
const user = { id: 101, email: "jack@dev.com", personalInfo: { name: "Jack", address: { line1: "westwish st", line2: "washmasher", city: "wallas", state: "WX", }, }, }; const ExampleComponent = ({ user = {} }) => { const { personalInfo = {} } = user; const { name = "somedefault name", address = {} } = personalInfo; return ( <div> {name} <br /> {address.line1} <br /> {address.line2} </div> ); };No hay nada de malo en pasar objetos complejos como accesorios. ¿Por qué necesita guardarlo en el estado? Simplemente desestructura el objeto en el componente secundario (suponiendo que posiblemente no sea nulo o indefinido). Los componentes funcionales de React son solo funciones , no necesita guardar algo para indicarlo para usarlo. Dado que lo está pasando como accesorio de un componente principal, presumiblemente el componente principal realiza un seguimiento de su estado; cuando el estado principal se actualice, la propiedad cambiará y su componente secundario se volverá a representar (o, en otras palabras, la función de su componente secundario se llamará con los nuevos valores de propiedad).
const ExampleComponent = (props) => { const {personalInfo} = props.user; /* ... */ }