反应javascript中的LocalStorage解构数据答案

【问题标题】：LocalStorage destructuring data in react javascript反应javascript中的LocalStorage解构数据
【发布时间】：2020-09-30 23:43:33
【问题描述】：

如何在 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：无法读取未定义的属性“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} />

【问题讨论】：

product.priceHistory[0][0]?
@YevgenGorbunkov 不起作用 TypeError: Cannot read property '0' of undefined
那么，你probably 做错了……
console.log(product.priceHistory[0][0]) 我自己试过了，不知道怎么回事
添加源代码：pastebin.com/UaX3fNkC

标签： javascript reactjs local-storage

【解决方案1】：

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

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

使用optional chaining

codesandbox demo

【讨论】：

它应该在第一次渲染时显示 undefined，然后在第二次渲染后状态更新时您会看到它。检查我设置的代码框是否与您的代码结构匹配。我使用您的 JSON 字符串在脚本启动时设置 localStorage。注意：某些东西必须触发useEffect，所以如果你更新localStorage，你必须改变id或其他一些prop/state来触发渲染

【解决方案2】：

我认为你应该使用localStorage.getItem()

const { useState, useEffect } = React;

const localStorageMock = {
getItem: (key) => {
  return key === "1" ? null : JSON.stringify( {"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"]]})
}
}

const App = () => {
  const [product, setProduct] = useState({});
  const [id] = useState("2");
  
  useEffect(() => {
    let productFromLocalStorage = localStorageMock.getItem(id);
    setProduct(JSON.parse(productFromLocalStorage));
  }, [id]);
  
  return <div>
    {console.log(product && product.priceHistory)}
  </div>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

【讨论】：

我使用 localStorage.getItem(id) 但结果是一样的