Question

getitem 在 localStorage 中返回 null

2021-08-19

213

reactjs

我尝试在 localStorage 中设置和获取项目。并且我有功能状态，因此我尝试获取和设置项目作为状态的键， setitem 正在工作，但是当我刷新我的网站时 localstorage 返回 null。

我的代码如下：

const [chart, setChart] = useState([
    empty,
    empty,
    empty,
    empty,
    empty,
    empty,
    empty,
    empty,
  ]);
  const charts = index => chart[index].key;

  const chartStorageKey = [
    charts(0),
    charts(1),
    charts(2),
    charts(3),
    charts(4),
    charts(5),
    charts(6),
    charts(7),
  ];
  
   useEffect(() => {
    const persistChart = localStorage.getItem("chart");
    JSON.parse(persistChart);
  });

  
  useEffect(() => {
    localStorage.setItem("chart", JSON.stringify(chartStorageKey), [
      chartStorageKey,
    ]);
  });

Answer 1

由于组件为空，因此您需要在此数组中添加对象，其键为 key，值为空组件。

const [chart, setChart] = useState([
    {key: empty},
    {key: empty},
    {key: empty},
    {key: empty},
    {key: empty},
    {key: empty},
    {key: empty},
    {key: empty},
  ]);

因为在这里您将抛出数组并获取键，在本例中为 null。

const charts = index => chart[index].key;

这是游乐场

的链接

Answer 2

useEffect 顺序错误。

第二个 useEffect 应该在第一个。

Snehendu Roy

2021-08-19

Answer 3

UseEffect 将在每次渲染时被调用，因此添加第二个参数，以便仅在安装组件时才调用它

  const [chart, setChart] = useState([
    empty,
    empty,
    empty,
    empty,
    empty,
    empty,
    empty,
    empty,
  ]);
  const charts = index => chart[index].key;

  const chartStorageKey = [
    charts(0),
    charts(1),
    charts(2),
    charts(3),
    charts(4),
    charts(5),
    charts(6),
    charts(7),
  ];

 useEffect(() => {
    localStorage.setItem("chart", JSON.stringify(chartStorageKey));
  },[]);
  
 useEffect(() => {
    const persistChart = localStorage.getItem("chart");
    console.log(persistChart)
  }, []);

如果您想在每次 chart 状态改变时更改本地存储，那么只需将 chart 传递给 useEffect 的依赖项数组即可

 useEffect(() => {
    localStorage.setItem("chart", JSON.stringify(chartStorageKey));
  },[chart]);
  
 useEffect(() => {
    const persistChart = localStorage.getItem("chart");
    console.log(persistChart)
  }, [chart]);