Question

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

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

我将从componentDidMount加载数据：

下面的代码将运行函数“ loadItems”，该函数首先检查localstorage中是否有任何数据（名称为“ workItems”），如果存在，则将其存储在状态中。如果不是，它将在api调用中调用数据库，将数据存储为state，还将数据存储在localstorage中，下次安装组件时将使用该存储。我已确认数据已存储在浏览器中。但是，当存在本地存储中的数据时，将其映射到状态，最后在从render函数返回时将其映射出，它将抱怨数据为“空”。怎么来的？数据存储在本地存储中，当我从开发工具中检查数据时就存在于本地存储中。

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);

}

Answer 1

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)

Answer 2

您可以使用this hook。否则，要从本地存储中获取数据，请使用以下功能：

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"))

从localstorage获取项目将返回null

2 个答案: