React Context API状态共享报错：元素类型无效问题求助

我尝试用React Context API实现组件间状态共享，编写了如下代码，但运行时报错。

错误信息 #

The element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

提示需检查App的render方法。

原代码 #

Component 1 (App.js) #

import "./styles.css";
import { useState, createContext } from "react";
import { Component2 } from "./Component2.js";

export const userContext = createContext();
export default function App() {
  const [user, setUser] = useState("vk1");

  return (
    <div className="App">
      <userContext.provider value={{ user, setUser }}>
        <Component2 />
      </userContext.provider>
    </div>
  );
}

Component 2 (Component2.js) #

import React from "react";
import { useContext } from "react";
import userContext from "./App";

const Component2 = () => {
  const { user, setUser } = useContext(userContext);
  setUser("vkk");
  return <h1>Hi i am from {user} component2</h1>;
};

export default Component2;

Component 3 (Component3.js) #

import React from "react";
import { useContext } from "react";
import userContext from "./App";

const Component3 = () => {
  const { user, setUser } = useContext(userContext);
  setUser("vk");
  return <h2>I am from {user} component3</h2>;
};

export default Component3;

问题分析与修复步骤 #

1. Context Provider 大小写错误 #

React Context的Provider组件是大写开头的，原代码中userContext.provider的p是小写，导致React无法识别这个组件，这是报错的核心原因。

• 修复：将userContext.provider改为userContext.Provider

2. Context 导入方式错误 #

App.js中是命名导出userContext，但Component2和Component3用了默认导入，导致导入的userContext是undefined。

• 修复：将Component2和Component3中的import userContext from "./App"改为import { userContext } from "./App"

3. 直接在渲染阶段调用setUser导致无限重渲染 #

组件渲染时直接调用setUser会触发状态更新，进而再次触发渲染，形成无限循环。

• 修复：用useEffect包裹setUser，或者将其放在事件处理函数中（比如按钮点击）

4. 未渲染Component3（可选） #

原代码中App组件只渲染了Component2，若要测试Component3的状态共享，需在Provider内部添加Component3的渲染。

修复后的完整代码 #

App.js #

import "./styles.css";
import { useState, createContext } from "react";
import Component2 from "./Component2.js";
import Component3 from "./Component3.js";

export const userContext = createContext();
export default function App() {
  const [user, setUser] = useState("vk1");

  return (
    <div className="App">
      {/* 修复Provider大小写 */}
      <userContext.Provider value={{ user, setUser }}>
        <Component2 />
        <Component3 />
      </userContext.Provider>
    </div>
  );
}

Component2.js #

import { useContext, useEffect } from "react";
// 修复Context导入方式
import { userContext } from "./App";

const Component2 = () => {
  const { user, setUser } = useContext(userContext);

  // 用useEffect包裹setUser，避免无限重渲染
  useEffect(() => {
    setUser("vkk");
  }, [setUser]);

  return <h1>Hi i am from {user} component2</h1>;
};

export default Component2;

Component3.js #

import { useContext, useEffect } from "react";
// 修复Context导入方式
import { userContext } from "./App";

const Component3 = () => {
  const { user, setUser } = useContext(userContext);

  // 用useEffect包裹setUser，避免无限重渲染
  useEffect(() => {
    setUser("vk");
  }, [setUser]);

  return <h2>I am from {user} component3</h2>;
};

export default Component3;

注意事项 #

• React组件和Context的Provider/Consumer都必须大写开头，否则React会将其视为普通HTML标签，无法识别。
• 区分命名导出和默认导入，避免导入undefined。
• 状态更新函数setUser不能直接在组件的渲染逻辑中调用，否则会引发无限重渲染，需放在生命周期钩子（如useEffect）或事件处理函数中。

内容的提问来源于stack exchange，提问作者Vishal Kumar