reactjs - React Context API 不工作错误:元素类型无效
问题描述
我是新手,刚刚学习 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;
解决方案
您可能已经导出了所有内容,但我认为问题在于导出类型
import { MyProvider, MyContext } from "./App";
推荐阅读
- flutter - 从较低级别的小部件更新较高级别的小部件状态
- javascript - React-Navigation 参数从未传递
- django - 将通用视图中的查询集限制为以 request.user 作为外键的对象
- selenium-webdriver - VS Code 自动在 await 语句周围添加括号
- python - 从自己的类调用 iPyWidgets 不显示
- c# - 如何在 C# 中使用反射获取 Json 属性名称
- sql - Oracle:比较同一表中的多行日期
- python - 收到错误提示无法比较类型 'ndarray(dtype=int64)' 和 'str'
- java - 关于intellij中的java GUI表单
- python - Pynput 导致内存泄漏