无法使用React上下文

问题描述

当我从其他文件导入上下文时，我无法使用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"],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;

解决方法

您应该在import AppListTable from './AppListTable'; import B from 'B'; import C from 'C'; const COMPONENTS = { AppListTable B,C } var selectedComponents = [{component:'A'},{component: 'C'}]; const components = selectedComponents.map( (val,index) => { const TempComponent = COMPONENTS[val.component]; return <Route key={index} exact path={val.url}><TempComponent /></Route> }) render ( {components} ); 内使用Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ AppListTable: () => Element; }'. No index signature with a parameter of type 'string' was found on type '{ AppListTable: () => Element; }'中的StoreContext。

BugsList.js

StoreProvider.js