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

Question

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

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;

这是一个online version on 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;

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

localForage in react app: self is undefined

reactjs

localforage