从 htm5 localstorage 加载并过滤 json

Question

我尝试从 https://api.github.com/users/moonhighway 中获取 json 并替换它并存储在浏览器中，然后从本地存储加载新数据，但它并没有 work.I 我 100% 受到启发通过这个项目：https://codesandbox.io/s/ancient-surf-730m1?file=/src/App.js 下面是我的代码：

const { useEffect, useState } = React;
const loadjson = (key) => JSON.parse(window.localStorage.getItem(key));
const savejson = (key, data) => {
  window.localStorage.setItem(JSON.stringify(key), JSON.stringify(data));
};
const App = ({ login }) => {
  const [data, setData] = useState(loadjson(`user:${login}`));

   useEffect(() => {
     if(!data) return;
     if (!`user:${login}`) return;
     if(data.login===login) return;
    const { name, avatar_url, location } = data;
    savejson(`user:${login}`, { name, avatar_url, location, login });
  },[data]);
  useEffect(() => {
    if (!login) return;
    if(data&&data.login===login) return;
    fetch(`https://api.github.com/users/${login}`)
      .then((response) => response.json())
      .then(setData)
      .catch(console.error);
  },[login]);
 

  return <pre>{JSON.stringify(data, null, 2)}</pre>;

};

ReactDOM.render(, document.body);

我的项目 link:https://codepen.io/nutkin/pen/QWKoabm?editors=1111,but 它不会 work.expected 输出看起来像这样:

{
  "name": "Moon Highway",
  "login": "moonhighway",
  "avatar_url": "https://avatars0.githubusercontent.com/u/5952087?v=4",
  "location": "Tahoe City, CA"
}

Answer 1

因为你的save_key和load_key不一样

请像下面这样更改您的 savejson：

const savejson = (key, data) => {
  window.localStorage.setItem(key, JSON.stringify(data));
};

从 htm5 localstorage 加载并过滤 json

load fetched and filtered json from htm5 localstorage

local-storage

reactjs

fetch-api

use-effect

use-state