React Context API 不工作错误：元素类型无效

Posted 2023-04-14

【中文标题】React Context API 不工作错误：元素类型无效

【英文标题】：React Context API not working Error: Element type is invalid

【发布时间】：2020-04-02 19:04:55

【问题描述】：

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

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

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;

【问题讨论】：

You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports 是提到的错误。首先检查您是否在应用程序中正确导出了所有使用的文件（主页、导航栏等）

一切都已导出

【参考方案1】：

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

import MyProvider, MyContext from "./App";

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

【讨论】：

太棒了！不要忘记将此设置为“已回答”。