reactjs - 错误“找不到名称上下文”React 路由器 6 和 useContext

我找不到使用 React 路由器 6 和 useContext 挂钩将数据传递给所有孩子的方法。当我用我的 Context.Provider 包装 <Routes></Routes> 并使用组件内的 Context.Consumer 调用它时,会出现错误:

错误:找不到名称“ShopContext”。

1.带有路由和Context.Provider的App.tsx

import React, { useState, createContext } from 'react';
import './App.scss';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from '../../pages/Home';
import SharedLayout from '../../layouts/SharedLayout';
import Artists from '../../pages/Artists';
import Contact from '../../pages/Contact';
import NotFound from '../../pages/NotFound';
import { Shop } from '../../interfaces/Shop';
import Data from '../../data.json';


function App() {

    const [Infos] = useState<Shop>(Data)
    const ShopContext = createContext({})

    return (
        <BrowserRouter>
            <ShopContext.Provider value={Infos}>
                <Routes>
                    <Route path='/' element={<SharedLayout />}>
                        <Route index element={<Home />} />
                        <Route path='artists' element={<Artists />}/>
                        <Route path='contact' element={<Contact />}/>
                        <Route path='*' element={<NotFound />} />
                    </Route>
                </Routes>
            </ShopContext.Provider>
        </BrowserRouter>
    )}

export default App;

和子组件:

import React, { useContext } from 'react';

function Artists(){

    const shop = useContext(ShopContext)

    return <>
        Artists
    </>
}

export default Artists;

我试过了:

  1. 包装包含 SharedLayout 的第一个路由 ==> 不起作用,路由必须是 <Routes>

    的直接子级
  2. 像这样将每个组件包装在每个 Route 中:

    <BrowserRouter>
             <Routes>
                 <Route path='/' element={
                     <ShopContext.Provider value={Infos}>
                     <SharedLayout />
                     </ShopContext.Provider>
                 }>
                     <Route index element={
                         <ShopContext.Provider value={Infos}>
                             <Home />
                         </ShopContext.Provider>
                     } />
                     <Route path='artists' element={
                         <ShopContext.Provider value={Infos}>
                             <Artists />
                         </ShopContext.Provider>
                     }/>
                     <Route path='contact' element={
    
                         <ShopContext.Provider value={Infos}>
                             <Contact />
                         </ShopContext.Provider>
                     }/>
                     <Route path='*' element={<NotFound />} />
                 </Route>
             </Routes>
     </BrowserRouter>

    )

回答1

问题

ShopContext React 上下文应该在任何 React 组件之外声明。通过在 App 中声明它,每次 App 渲染时都会创建一个新的上下文。因为 ShopContext 是在 App 内声明的,所以它没有被定义为与路由组件中的 useContext 钩子一起使用,试图使用上下文 value。

解决方案

ShopContext 移动到它自己的文件中,以便可以创建和导出/导入以供使用。

例子:

ShopContext

import React, { useContext, useState, createContext } from 'react';

const ShopContext = createContext({});

const ShopProvider = ({ children }) => {
  const [infos, setInfos] = useState<Shop>(Data);

  ... business logic to set/update infos state, etc ...

  return (
    <ShopContext.Provider value={infos}>
      {children}
    </ShopContext.Provider>
  );
};

export useShopContext = () => useContext(ShopContext);

export default ShopProvider;

应用程序

import ShopProvider from '../path/to/ShopProvider';

function App() {
  return (
    <BrowserRouter>
      <ShopProvider>
        <Routes>
          <Route path='/' element={<SharedLayout />}>
            <Route index element={<Home />} />
            <Route path='artists' element={<Artists />}/>
            <Route path='contact' element={<Contact />}/>
            <Route path='*' element={<NotFound />} />
          </Route>
        </Routes>
      </ShopProvider>
    </BrowserRouter>
  );
}

艺术家

import { useShopContext } from '../path/to/ShopProvider';

function Artists(){
  const shop = useShopContext();

  return (
    <>
      Artists
    </>
  );
}

相似文章

r - Average duration 的时间花费 R

我正在尝试编写一个可以计算行为事件的averageduration的脚本。理想情况下,可以为我所有的行为类别进行计算,如果可能的话,还可以计算标准误差。我的数据如下29/10/20156:09:389...

最新文章