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

wbrvyc0a 于 2023-03-08 发布在 React

关注(0)|答案(4)|浏览(101)

我得到以下错误：
警告：不支持直接呈现，并且将在将来的主要版本中删除。是否要改为呈现<Context.Consumer>？
这是我的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钩子。

reactjs

来源：https://stackoverflow.com/questions/71285222/rendering-context-directly-is-not-supported-and-will-be-removed-in-a-future-ma

4条答案

按热度按时间

xbp102n01#

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

import AuthProvider from "./context/AuthContext";

收件人：

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

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

赞(0）回复(0）举报 2023-03-08

brjng4g32#

不久前我遇到了这个错误，问题出在我的imports上......所以我导入了上下文本身并呈现了它，而不是上下文提供者函数本身

赞(0）回复(0）举报 2023-03-08

oxf4rvwz3#

在我看来，你需要一个文件上下文提供者;
示例：

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

赞(0）回复(0）举报 2023-03-08

up9lanfz4#

我也得到这个错误，这是我的实现，如果有帮助，
我评论了// const { Provider } =产品上下文;
并将更改为〈ProductContext.提供程序值={{}}〉

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>
    )
}

赞(0）回复(0）举报 2023-03-08

我来回答

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

4条答案

相关问题

热门标签

最新问答