React 16.3.x Context Provider报错：期望字符串/类/函数却得到对象

嘿，我之前也踩过这个坑！这个错误几乎都是组件引用/导入导出不匹配导致的，咱们结合你的代码片段一步步排查：

1. 先核对Context的导入导出方式 #

你的Context.js用的是命名导出：

// Context.js
import React from 'react'
export const Context = React.createContext();

那在index.js里导入时，必须用命名导入，不能用默认导入：
❌ 错误写法：

import Context from './Context'

✅ 正确写法：

import { Context } from './Context'

2. 确认Provider的使用是否正确 #

你需要用Context.Provider作为包裹组件，而不是直接使用Context本身。比如index.js里的正确写法应该是这样：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Context } from './Context';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Context.Provider value={{ /* 这里放你的上下文数据/方法 */ }}>
    <App />
  </Context.Provider>
);

额外排查点 #

如果上面两步都没问题，再检查：

• 有没有其他组件（比如App）的导入错误
• 确认你的React版本支持createContext（React 16.3+就支持，应该没问题）

这个错误的核心就是：你把一个Context对象当成了组件来渲染，而实际上只有Context.Provider才是可渲染的组件类型，或者是导入时拿错了对象。

内容的提问来源于stack exchange，提问作者Kevin Danikowski