代码之家 › 专栏 › 技术社区 › SpaceX

无法使用React上下文

mobx-react react-context mobx reactjs

0

SpaceX · 技术社区 · 4 年前

TypeError: Cannot read property 'bugs' of undefined .

但是当我把它们放在一起时(如图所示 tutorial

索引.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>
    </>
  ));
};

存储提供者.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;

1 回复 | 直到 4 年前

1

3

bertdida 4 年前

你应该用 StoreContext 从 BugsList.js 在你的 StoreProvider.js

// 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);

  ...
};