反应.type无效——期望是字符串(对于内置组件)-尝试将类组件转换为功能组件反应

Question

我得到以下错误

反应。类型无效——期望是字符串(对于内置的组件)或类/函数(用于复合组件)，但得到:未定义的。您可能忘记了从文件中导出组件它定义在，或者您可能混淆了默认导入和命名导入。检查你的代码在Navbar.js:8。在NavbarComponent在ThemeContextProvider

我遵循一个教程，他正在使用一个类组件使用react-context provider &但是我尝试将其转换为功能组件。这就是我的代码

ThemeContext.js

import { createContext, useState } from "react";
export const ThemeContext = createContext();
function ThemeContextProvider(props) {
const [theme, setTheme] = useState({
isLight: true,
light: "light",
dark: "dark",
});
const toggleTheme = () => {
setTheme({ isLight: !theme.isLight });
};
return (
<ThemeContext.Provider value={{ ...theme, toggleTheme: toggleTheme }}>
{props.children}
</ThemeContext.Provider>
);
}
export default ThemeContextProvider;

这就是错误的来源Navbar.js

import { Link } from "react-router-dom";
import { Navbar, Nav, Container } from "react-bootstrap";
import { ThemeContext } from "../helpers";
function NavbarComponent() {
return (
//the error start from this line
<ThemeContext.Consumer>
{(themeContext) => {
const { isLight, light, dark } = themeContext;
const theme = isLight ? light : dark;
return (
<div id={theme}>
<Navbar bg="dark" variant="dark" expand="lg">
<Container>
<Navbar.Brand as={Link} to="/">
<h1>Brand</h1>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse
id="basic-navbar-nav"
className="justify-content-end"
>
<Nav className="mr-auto">
<Nav.Link as={Link} to="/complain">
Complain
</Nav.Link>
<Nav.Link as={Link} to="/product">
Product
</Nav.Link>
<Nav.Link as={Link} to="/category">
Category
</Nav.Link>
<Nav.Link as={Link} to="/profile/1">
Profile
</Nav.Link>
<Nav.Link>Logout</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
);
}}
</ThemeContext.Consumer>
);
}
export default NavbarComponent;

和代码从教程在这里Navbar.js

import React,{Component}from'react';
import{ThemeContext}from'../helpers';
class Navbar extends Component{
render(){
return(
<ThemeContext.Consumer>{(context)=>{
const{isLightTheme,light,dark}=context;
const theme=isLightTheme?light:dark;
return(
<nav style={{background:theme.ui,color:theme.syntax}}>
<h1>Context App</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</nav>
)
}}</ThemeContext.Consumer>
);
}
}
export default Navbar;

任何帮助将不胜感激。谢谢你

Answer 1

事实证明，导入ThemeContextProvider的方式是错误的。我把index.js放在helper文件夹中。下面是index.js

的代码

import ThemeContextProvider, { ThemeContext } from "./ThemeContext";
export { ThemeContext, ThemeContextProvider };

这个问题是通过引用这篇文章解决的