<Context> 不支持直接渲染，并将在未来的主要版本错误中删除

Question

我收到以下错误：

警告：不支持直接渲染，将在未来的主要版本中删除。你的意思是渲染<上下文.消费者>相反

这是我的app.js组件：

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import SignInSide from "./components/SignInSide";
import AboutUs from "./pages/AboutUs";
import ourservices from "./pages/OurServices";
import portfolio from "./pages/portfolio";
import SignUp from "./components/signup";
import booking from "./pages/book";
import PreviousBookings from "./pages/PreviousBookings";
import BookingContext from "./context/bookings/BookingContext";
function App() {
return (
<>
<BookingContext>
<Router>
<Navbar />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/aboutus" component={AboutUs} />
<Route path="/ourservices" component={ourservices} />
<Route path="/developer" component={portfolio} />
<Route path="/login" component={SignInSide} />
<Route path="/signup" component={SignUp} />
<Route path="/booking" component={booking} />
<Route path="/booking-history" component={PreviousBookings} />
</Switch>
</Router>
</BookingContext>
</>
);
}
export default App;

我正在尝试使用useContext挂钩。

Answer 1

我的解决方案正在发生变化：

import AuthProvider from "./context/AuthContext";

收件人：

import {AuthProvider} from "./context/AuthContext";

我是React的新手，可能是因为AuthProvider不是默认的导出

Answer 2

不久前我遇到了这个错误。问题是我的进口。。。所以我导入了上下文本身并呈现它，而不是上下文提供程序函数本身

Answer 3

在我看来，您需要一个文件上下文提供程序；

示例：

"./BookingProvider"
function BookingProvider()
return (
<BookingContext.Provider>
....
<BookingContext.Provider>
)
export default BookingProvide
"app.js"
<BookingProvide >
....
</BookingProvide>

Answer 4

Ei，我也得到了这个错误，如果有帮助的话，这是我的实现，

我评论了// const { Provider } = ProductContext;

并且将CCD_ 2改变为CCD_。

import { ReactElement, createContext } from 'react';
import { useProduct } from '../hooks/useProduct';
import { ProductContextProps,  Product } from '../interfaces/interfaces';
import styles from '../styles/styles.module.css'
export const ProductContext = createContext({} as ProductContextProps);
// const { Provider } = ProductContext;
export interface Props {
product: Product;
children?: ReactElement | ReactElement[];
className?: string;
}
export const ProductCard = ({ children, product, className }: Props ) => {
const { counter, increaseBy } = useProduct();
return (
<ProductContext.Provider value={{
counter,
increaseBy,
product
}}>
<div className={ `${styles.productCard}   ${className}` }>
{ children }
</div>
</ProductContext.Provider>
)
}

Answer 5

我在测试文件中调用上下文，如下所示：<DataContext> <Child /> </DataContext>

而不是：<DataProvider> <Child /> </DataProvider>