尝试显示存储在本地存储中的数组的值时，对象可能为空错误（打字稿）

Question

我目前正在创建一个天气应用程序，您可以在其中存储您最喜欢的位置，这些位置被推送到一个数组，该数组又存储在本地存储中。

现在，我想在不同的组件中显示数组的值，但在我的代码中，我总是遇到对象可能为 null 的错误。

export const FavoritesList: React.FC<any> = () => {
  // const storageFavorites = localStorage.getItem('favorites');
  const lsOutput = document.getElementById('lsOutput');
  for (let i = 0; i < localStorage.length; i++) {
    const key: any = localStorage.key(i);
    const value: any = localStorage.getItem(key);
    // console.log(value);
    value.forEach(
      (item: any) => (lsOutput.innerHTML += `<li>${item}</li><br/>`)
    );
  }
  return (
    <div>
      <ul id="lsOutput"></ul>
    </div>
  );
};

它特别指向 lsOutput.innerHTML

我做错了什么？我目前已经分配了所有内容，只是为了让它先工作。非常感谢您！

Answer 1

TypeScript 警告您 getElementById 可以 return null（如果没有具有该 ID 的元素）。如果您知道该元素将存在，您可以使用 non-null assertion:

确保 TypeScript

const lsOutput = document.getElementById('lsOutput')!;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

（但我认为您不知道，请参阅下面的栏。）

您稍后会遇到与 value 相同的问题。 TypeScript 所做的分析不够深入，无法知道您从 localStorage.key(i) 得到 key，因此您知道 localStorage.getItem(key) 将 return 非 null 值。所以，你必须再次告诉它：

const value: any = localStorage.getItem(key)!;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

但还有另一个问题：value.forEach 永远不会在该代码中定义。 localStorage 仅存储字符串，不存储数组，并且字符串没有 forEach 方法。

当我想在localStorage中存储复杂数据时，我使用JSON。例如：

// Storing an array (or object)
localStorage[key] = JSON.stringify(theArray);

// Retrieving:
const theArray = JSON.parse(localStorage[key]);

您正在尝试直接在 React 组件中使用 DOM，这几乎是不必要的。当有必要时，你这样做的方式不是最佳实践（除非你已经有一个 ID 为 lsOutput 的 different 元素，否则不会起作用，在在这种情况下，您正在创建一个具有无效结构的 DOM——您不能有两个具有相同 id 值的元素）。当您的组件函数运行时，您 return 的输出还不会在 DOM 中。

相反，以 React 的方式进行：

export const FavoritesList: React.FC<any> = () => {
  const items = [];
  for (let i = 0; i < localStorage.length; i++) {
    const key: any = localStorage.key(i);
    const value: any = localStorage.getItem(key);
    items.push(value);
  }
  return (
    <div>
      <ul>{items.map(item => <li>{item}</li>}</ul>
    </div>
  );
};

我还建议使用单个存储条目来保存该项目数组，如上所示使用 JSON：

export const FavoritesList: React.FC<any> = () => {
  const items: string[] = JSON.parse(localStorage.getItem("favorites"))!;
  return (
    <div>
      <ul>{items.map(item => <li>{item}</li>}</ul>
    </div>
  );
};

每次调用组件函数时不去本地存储也可能是有意义的；也许将项目加载到父组件中并将它们作为道具传递下去。

尝试显示存储在本地存储中的数组的值时，对象可能为空错误（打字稿）

Object is possibly null error (typescript) when trying to display the value of an array which is stored in localstorage

javascript

typescript

reactjs

eslint-config-airbnb

react-tsx