React Context API not working Error: Element type is invalid

Question

我是 React 的新手，只是在学习 Context api。我在越过此错误页面时遇到问题。我相信我已经正确设置了上下文和提供程序，但似乎无法呈现页面。下面是我的代码。任何帮助将不胜感激。

错误信息是：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。


APP.JS

import React, { Component } from 'react';
import './App.css';
import Navbar from './Navbar';
import Home from './Home';
import Vehicles from './Vehicles'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';


export const MyContext = React.createContext();

export class MyProvider extends Component {
  state = {
    cars: [
      {
        model: "ILX",
        make: "Acura",
        info: "Compact Sport Sedan",
        bgUrl: ""
      },
      {
        model: "TLX",
        make: "Acura",
        info: "Performance Luxury Sedan",
        bgUrl: ""
      },
      {
        model: "RDX",
        make: "Acura",
        info: "Luxury Crossover SUV",
        bgUrl: ""
      },
      {
        model: "MDX",
        make: "Acura",
        info: "Three-Row Luxury SUV",
        bgUrl: ""
      },
      {
        model: "NSX",
        make: "Acura",
        info: "Next-Generation Supercar",
        bgUrl: ""
      },
      {
        model: "RLX",
        make: "Acura",
        info: "Premium Luxury Sedan",
        bgUrl: ""
      }
    ]
  }
  render() {
    return (
      <MyContext.Provider value={{state: this.state}}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

class App extends Component {
  render() {
    return (
      <MyProvider>
        <Router>
          <div className="App">
            <Navbar />
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/Vehicles" exact component={Vehicles} />
            </Switch>
          </div>
        </Router>
      </MyProvider>
    );
  }
}

export default App;


VEHICLES.JS


import React, { Component } from 'react';
import './App.css';
import MyContext from './App';
import {useContext} from 'react';
import ilx from './images/ilx.jpg'
import tlx from './images/tlx.jpg'
import nsx from './images/nsx.jpg'
import mdx from './images/mdx.jpg'
import rlx from './images/rlx.jpg'
import rdx from './images/rdx.jpg'

class Vehicles extends Component {

  render() {
    return (
      <div className="vehicles">
        <div className="showcase">
          <MyContext.Consumer>
            {(context) => (
              <React.Fragment>
                <h4>{context.state.model}</h4>
                <h6>{context.state.info}</h6>
              </React.Fragment>
            )}
          </MyContext.Consumer>
        </div>
      </div>
    )
  }
}

export default Vehicles;

Answer 1

您可能已经导出了所有内容，但我认为问题出在导出类型上

import { MyProvider, MyContext } from "./App";

https://codesandbox.io/s/winter-cache-jylqn

React Context API not working Error: Element type is invalid

React Context API not working Error: Element type is invalid

reactjs

react-context