React 从本地存储获取对象的值
我从 localstorage 获取数据。 我使用了 useEffect。但是当我想获取对象中的值时，我遇到了问题。
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) is working.
No console.log(carinfo.brand) is not working
我遇到了这个错误
Uncaught TypeError: Cannot read properties of undefined (reading 'brand')
我怀疑您收到错误是因为效果尚未发生。您的组件首次呈现时，carinfo 未定义。
您可以为 state 设置初始值以解决此问题：
const [carinfo, setCarInfo] = useState({});
您的
console.log(carinfo.brand)
在
useEffect
之前执行。
这意味着您在设置
carinfo
之前尝试访问其值。
解决方案 1：将
console.log(carinfo.brand)
放在
useEffect
内>
解决方案 2：如果您需要
useEffect
之外的
carinfo
，请将其写入函数内并在设置
carinfo
值后调用该函数
在初始渲染时，
carinfo
的值将与您用来调用
useState
的值匹配。
useState()
相当于
useState(undefined)
。
undefined
是一个没有
brand
属性的值。
useEffect
将触发，然后使用
localStorage
中的任何值更新状态，前提是它与您预期的数据结构匹配（您可能需要考虑创建一种更安全的方式访问
localStorage
。
尽管如此，只有在初始渲染之后才会设置状态，然后您才可能在
carinfo
中获得预期的值。
您可以使用可选链来保护自己，
console.log(carinfo?.brand)
或其他方式来处理未定义的情况。