typescript 错误- JSX元素类型“X”没有任何构造函数或调用签名

elcex8rz  于 2022-12-14  发布在  TypeScript
关注(0)|答案(1)|浏览(141)

我正在尝试通过上下文提供程序呈现数据,但收到此消息阅读JSX元素类型上下文没有任何构造函数或调用签名。
我在App.tsx中的代码是

import { Context } from './interfaces/cardContext';

const App = () => {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Context>
          <RestaurantDetails />
        </Context>
        <Footer />
      </BrowserRouter>
    </div>
  );
};
export default App

和我的上下文页面中

export interface ContextData {
  restaurants: restaurantType[];
}
export interface Props {
  children: React.ReactNode;
}
export const Context = createContext({} as ContextData);

export const Provider = ({ children }: Props) => {
  const [restaurants, setRestaurants] = useState<restaurantType[]>([]);

  useEffect(() => {
    fetch('http://localhost:5001/restaurants')
      .then((res) => res.json())
      .then((data) => setRestaurants(data));
  }, []);
  return (
    <Context.Provider value={{ restaurants }}>{children}</Context.Provider>
  );
};
67up9zun

67up9zun1#

您应该将提供者汇入为其他元件的 Package 函数:

import { Provider } from './interfaces/cardContext';

const App = () => {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Provider>
          <RestaurantDetails />
        </Provider>
        <Footer />
      </BrowserRouter>
    </div>
  );
};
export default App

然后在其他组件中使用您的上下文,如下所示:
第一次

相关问题