localForage в приложении реакции: самоопределение не определено - PullRequest
0 голосов
/ 06 апреля 2020

Я пытаюсь использовать localForage в reactjs приложении. Вызов 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;

Вот онлайн-версия для codesandbox .

1 Ответ

1 голос
/ 06 апреля 2020

Каким-то образом внутренне теряет контекст при импорте методов по отдельности, отлично работает при импорте 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;
...