javascript - 反应javascript中的LocalStorage解构数据

Question

如何在 localStorage 中获取此元素？

在这里我可以 console.log(product.priceHistory) 但如何获得它的元素价格？

 useEffect(() => {
    let productFromLocalStorage = localStorage.getItem(id);
    setProduct(JSON.parse(productFromLocalStorage));
  }, [id]);

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Product {product.name} View Page</h1>
      {console.log(product.priceHistory)}
      <Table product={product} />
      <Tabs data={data} />
    </div>
  );

Console.log(product.priceHistory) 显示：

原始数据：

{"name":"table","ean":"eur","type":"furniture","weight":"21","color":"red","quantity":"8"," price":"55","active":true,"priceHistory":[["555","2020-06-11T10:27:36.208Z"],["55","2020-06-11T10:28 :44.392Z"],["55","2020-06-11T10:28:46.494Z"],["55","2020-06-11T10:28:47.382Z"],["55"," 2020-06-11T10:28:48.577Z"]]}

完整源代码：https ://pastebin.com/gJbkCLPh

Console.log(产品)

错误：TypeError：无法读取未定义 ProductView 的属性“0”

D:/talech/talech/src/Screens/Product.js:46
  43 | 
  44 |  return (
  45 |    <div style={styles.container}>
> 46 |      <h1 style={styles.title}>Product {product.name} View Page</h1>
     | ^  47 |      {console.log(product.priceHistory[0][0])}
  48 |      <Table product={product} />
  49 |      <Tabs data={data} />

标签： javascriptreactjslocal-storage

Answer 1

priceHistory 将在第一次渲染时未定义，直到异步调用 useEffect setState 并使用从 localStorage 加载的新数据加载到状态中触发重新渲染

{console.log(product.priceHistory?.[0]?.[0])}

使用可选链

代码沙盒演示