React 应用程序中的 localForage：self 未定义

Question

我正在尝试在reactjs 应用程序中使用localForage 。调用setItem然后getItem工作一次。用 设置的值setItem可以通过 正确恢复getItem。如果之后再次调用它们，TypeError则会抛出 a：

TypeError: self is undefined localforage.js:1012

可以使用最小的reactjs应用程序来重现该错误，这里只是一个功能组件。
当组件被渲染时，它调用setItem和getItem。它会在单击按钮时重新渲染并setItem再次调用getItem。这会导致TypeError.

import React, { useState } from "react";
import { getItem, setItem } from "localforage";

function App() {
  const [state, setState] = useState(0);
  setItem("test", state).then(() => {
    console.log("used localForage");
  });

  getItem("test").then((val) => {
    console.log("got: ", val);
  });
  return (
    <button
      onClick={() => {
        setState(Math.floor(Math.random() * 10));
      }}
    >
      {state}
    </button>
  );
}

export default App;

这是codesandbox 上的在线版本。

Answer 1

不知怎的，当单独导入方法时，它会在内部丢失上下文，当作为一个整体导入 localforage 时，它​​工作得很好

import React, { useState } from "react";
import localforage from "localforage";

function App() {
  const [state, setState] = useState(0);
  localforage.setItem("test", state).then(() => {
    console.log("used localForage");
  });

  localforage.getItem("test").then(val => {
    console.log("got: ", val);
  });
  return (
    <button
      onClick={() => {
        setState(Math.floor(Math.random() * 10));
      }}
    >
      {state}
    </button>
  );
}

export default App;