使用React Context Provider渲染数据时遇构造/调用签名错误

错误原因 #

你在App.tsx里直接把createContext生成的Context对象当作JSX组件渲染了，但这个Context只是上下文容器，并非可直接使用的React组件，因此触发该错误。

修正步骤 #

1. 修改App.tsx的导入与组件使用
   将原来导入的Context替换为你自定义的Provider组件，用它包裹需要共享数据的子组件：

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

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

2. 子组件消费Context数据示例（可选）
   若要在RestaurantDetails中获取共享的restaurants数据，需使用useContext钩子：

// RestaurantDetails.tsx
import { useContext } from 'react';
import { Context } from './interfaces/cardContext';

const RestaurantDetails = () => {
  const { restaurants } = useContext(Context);

  return (
    <div>
      {restaurants.map(restaurant => (
        <div key={restaurant.id}>{restaurant.name}</div>
      ))}
    </div>
  );
};

你的Context文件代码逻辑是正确的，已经封装了Context.Provider并在Provider组件中处理了数据获取，只需在App中正确使用该Provider组件即可。

内容的提问来源于stack exchange，提问作者Jovan Tanchevski