无法使用 React 上下文

Question

当我从不同的文件导入上下文时，我无法使用 React 上下文。即当我尝试在 BugsList.js 文件中打印 store.bugs 时。我得到 TypeError: Cannot read property 'bugs' of undefined.

然而，当我将它们放在一起（如 tutorial 所示）在一个文件中时，它可以工作（见下面的代码）。就我而言，我想导入 StoreProvider 并使用它，如 BugsList.js 文件

中所示

index.js 文件

import { StoreProvider } from "./StoreProvider";
import BugsList from "./BugsList";

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <StoreProvider>
        <BugsList />
      </StoreProvider>
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

BugsList.js 文件

import React from "react";
import { useLocalStore, useObserver } from "mobx-react";
import { StoreProvider } from "./StoreProvider";
const StoreContext = React.createContext();

const BugsList = () => {
  const store = React.useContext(StoreContext);
  console.log(store.bugs); // I get error Cannot read property 'bugs' of undefined

  return useObserver(() => (
    <>
      <h1>{store.bugsCount} Bugs!</h1>
      <p>{store.bugs}</p>
    </>
  ));
};

StoreProvider.js

import React from "react";
import { useLocalStore, useObserver } from "mobx-react";
const StoreContext = React.createContext();

export const StoreProvider = ({ children }) => {
  const store = useLocalStore(() => ({
    bugs: ["Centipede"],
    addBug: (bug) => {
      store.bugs.push(bug);
    },
    get bugsCount() {
      return store.bugs.length;
    }
  }));

  return (
    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
  );
};

然而，当我将它们放在一个文件中时，它起作用了。

在一个文件中

import React from "react";
import { useLocalStore, useObserver } from "mobx-react";
const StoreContext = React.createContext();

const StoreProvider = ({ children }) => {
  const store = useLocalStore(() => ({
    bugs: ["Centipede"],
    addBug: (bug) => {
      store.bugs.push(bug);
    },
    get bugsCount() {
      return store.bugs.length;
    }
  }));

  return (
    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
  );
};

const BugsList = () => {
  const store = React.useContext(StoreContext);
  console.log(store.bugs); // This prints the bugs list

  return useObserver(() => (
    <>
      <h1>{store.bugsCount} Bugs!</h1>
      <p>{store.bugs}</p>
    </>
  ));
};


const MobxTest = () => {
  return (
    <StoreProvider>
      <BugsList />
    </StoreProvider>
  );
};

export default MobxTest;

Answer 1

您应该在 StoreProvider.js 中使用 BugsList.js 中的 StoreContext。

// StoreProvider.js
import React from "react";

export const StoreContext = React.createContext();
...

// BugsList.js
import React from "react";
import { StoreContext } from "./StoreProvider";

export default BugsList = () => {
  const store = React.useContext(StoreContext);
  console.log(store.bugs);

  ...
};

无法使用 React 上下文

Unable to use React context

reactjs

mobx

mobx-react

react-context