React子组件设置Context值后父组件无法接收的问题解决

问题根源分析 #

你的Context使用逻辑完全搞反了：

1. React Context的Provider必须包裹需要消费Context值的组件，而不是反过来。你现在把Context.Provider放在子组件child里，App组件在Provider的外层，所以App通过useContext拿到的是createContext时的默认空值，根本拿不到子组件里的state。
2. 和路由直接相关：路由渲染的Index是App的子组件，而Provider又嵌套在child里，导致App完全不在Provider的作用域范围内。

解决方案：状态提升+正确包裹Provider #

把Context的状态逻辑提升到公共父组件（比如App），让Provider包裹整个应用的路由内容，这样父组件和所有子组件都能共享Context的状态。

1. 修改App.tsx（核心改动）

import { useState, useEffect, useContext } from "react";
import { useRoutes } from "react-router-dom";
import routes from "routes";
import Context from "./context";

function App() {
  // 把error状态提升到App层，作为Context的数据源
  const [error, setError] = useState("");
  const routing = useRoutes(routes);

  useEffect(() => {
    console.log("error : ", error);
  }, [error]); // 加上依赖，避免无限触发

  // 用Provider包裹整个路由内容，让所有后代组件都能访问Context
  return (
    <Context.Provider value={{ error, setError }}>
      {routing}
    </Context.Provider>
  );
}

2. 修改component.tsx（移除内部Provider，直接用Context的方法）

import { useContext, useEffect } from "react";
import Context from "./context";

// React组件首字母必须大写，否则会被识别为HTML标签
function Child() {
  // 直接从Context获取setError方法
  const { setError } = useContext(Context);

  useEffect(() => {
    setError("foo");
  }, [setError]);

  // 不需要再渲染Provider，直接返回组件内容
  return (
    <div>子组件内容</div>
  );
}

export default Child;

3. 修正Index.tsx的组件名

import Child from "./component";

function Index() {
  return <Child/>; 
}

export default Index;

关键原理说明 #

• Context的作用域是Provider包裹的所有后代组件，只有在这个范围内的组件，才能通过useContext拿到Provider提供的最新值。
• 把状态提升到公共父组件后，父组件可以直接访问状态，子组件通过Context提供的setError修改状态，父组件会实时感知到状态变化。

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