开发者问题收集

从 localstorage 获取项目返回 null

2019-10-28
10100
javascript reactjs local-storage

我有一个 React 应用，如果本地存储中没有数据，它会通过数据库的 API 调用加载项目。然后，我将使用数据设置状态，并将数据加载到本地存储中。下次加载应用时，它将从本地存储中获取数据。数据在 return 语句中映射出来。

问题是，即使本地存储中有数据，它仍然返回 null。

我将从 componentDidMount 加载数据：

以下代码将运行函数“loadItems”，该函数首先检查本地存储中是否有任何数据（名称为“workItems”），如果有，则将其存储在状态中。如果没有，它将在 API 调用中调用数据库，将数据存储到状态，并将数据存储在本地存储中，下次组件安装时将使用这些数据。我已确认数据存储在浏览器中。但是当来自 localstorage 的数据存在、映射到状态并最终在渲染函数的返回中映射出来时，它会抱怨数据为“null”。怎么回事？数据存储在本地存储中，当我从开发工具检查它时，它就在那里。 

componentDidMount() {
  this.loadItems(false);
}

async loadItems(forcedUpdate) {
  const payload = {
    forcedUpdate: forcedUpdate
  };
  if (localStorage.getItem('workItems').length > 0) {
    let data = localStorage.getItem("workItems");
    this.setState({
      workitems: localStorage.getItem("workItems"),
      loading: false,
      sources: allSources,
      showSources: allSources,
    }, () => {
      return;
    });
  }

  var apiUrl = "api/WorkItem/GetWorkItems";

  const response = await Axios.default.post(apiUrl, payload);
  console.log(response);
  var allSources = response.data.items
    .map(item => item.source)
    .filter((value, index, self) => self.indexOf(value) === index);

  this.setState({
    workitems: response.data.items,
    loading: false,
    sources: allSources,
    showSources: allSources,
    failedScrape: response.data.failedscrape,
    lastUpdated: response.data.lastUpdated
  });
  localStorage.setItem('workItems', response.data.items);

}
2个回答

localStorage.setItem(key, value) 期望值为字符串。当您传递诸如 [{id: 1}] 之类的对象时，它会将其类型转换为字符串。因此，对象变为字符串，如 "[object Object]" 。 

localStorage.setItem('test', [{id: 1}]);
const item = localStorage.getItem('test');
console.log(item) // "[object Object]" a string
console.log(item[0]) // "["
console.log(item[1)) // "o"

解决方案

解决方案是在保存到 localStrage 之前将其字符串化，并在获取项目后对其进行解析。 

localStorage.setItem('workItems', JSON.stringify(response.data.items));
// when you get the items
if (JSON.parse(localStorage.getItem('workItems')).length > 0)
Abdullah Danyal
2019-10-28

您可以使用 此钩子 。否则，要从本地存储获取数据，请使用以下函数： 

const getValue = (key, defaultValue = {}) => {
  try {
    // read value from local storage
    const item = window.localStorage.getItem(key);
    return item ? JSON.parse(item) : defaultValue;
  } catch (error) {
    console.log(error);
    return defaultValue;
  }
}

const setValue = (key, value) => {
  try {
    window.localStorage.setItem(key, JSON.stringify(value));
  } catch (error) {
    console.log(error);
  }
}

setValue("test", {test: "Test value"})
console.log(getValue("test"))
tolotra
2019-10-28