Obtengo datos de almacenamiento local. Usé useEffect. Pero cuando quiero obtener un valor en el objeto, tengo un problema.
const [carinfo, setCarInfo] = useState(); useEffect(() => { const storedData = JSON.parse(localStorage.getItem("carData")); setCarInfo(storedData); console.log(storedData.brand); }, []); console.log(carinfo.brand);console.log(storedData.brand) está funcionando.
No console.log(carinfo.brand) no funciona
tengo este error
TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'marca')
Sospecho que obtienes el error porque el efecto aún no ha ocurrido. La primera vez que se renderiza su componente, carinfo no está definido.
Puede establecer un valor inicial en el estado para evitar esto:
const [carinfo, setCarInfo] = useState({});Tu console.log(carinfo.brand) se está ejecutando antes de useEffect . Eso significa que está tratando de acceder al valor de carinfo antes de configurarlo.
Sol 1: Coloque el console.log(carinfo.brand) dentro useEffect
Sol 2: si necesita carinfo fuera de useEffect , escríbalo dentro de una función y llame a esa función después de establecer el valor de carinfo
En su representación inicial, el valor de carinfo coincidirá con lo que usted llama useState with.
useState() es el equivalente de useState(undefined) . undefined es un valor sin una propiedad de brand .
useEffect se activará y luego actualizará el estado con cualquier valor que tenga en localStorage , dado que coincide con la estructura de datos esperada (es posible que desee considerar crear una forma más segura de llegar a localStorage .
Sin embargo, solo después del renderizado inicial se establece el estado, y luego puede tener el valor esperado en carinfo .
Puede usar el encadenamiento opcional para protegerse, console.log(carinfo?.brand) o alguna otra forma de manejar el caso indefinido.