React Context API传值时props.data获取为Undefined问题排查

消费端拿不到props.data的核心原因是两层错误的Context Provider嵌套：

• App.js里包裹路由的<ContextData>没有传入data属性，内部rdata值为undefined。React Context的取值规则是消费组件永远取离自己最近的上层同Context Provider的value，你所有路由下的组件（包括Experi消费端）都被这层无参Provider包裹，自然拿到的是undefined。
• Exp文件里A组件写的<ContextData data="Sara" />是自闭合标签，没有传入任何children，这层Provider的作用域完全为空，根本包裹不到任何消费组件。你在这层组件内部写的<p>{rdata}</p>能正常显示"Sara"，只是组件自身渲染的内容，和下游消费端没有任何关系。
• 额外的语法笔误：第一行导入写的是import react form 'react'，form应为from，这个错误会直接导致编译失败。

根据你的业务场景二选一即可：

方案1：全局路由共享Context值 #

删除重复嵌套的无效Provider，直接在App层传入需要的data值：

1. 修正Exp文件（patmain.js）的代码，修复导入笔误，删除A组件里多余的Provider嵌套：

import React from 'react';
import {createContext} from "react";

export const ContextforFile = createContext();

export function ContextData(props){
   let rdata=props.data
return(
   <>
  <p>{rdata}</p>
  <ContextforFile.Provider value={rdata} >{props.children}</ContextforFile.Provider>
  </>
);
}

function A() {
  return (
    <div>
      {/* 删除这里多余的ContextData自闭合标签，直接写首页业务内容即可 */}
      首页内容
    </div>
  );
}

export default A;

2. 修改App.js，给外层包裹的ContextData传入data属性：

import Exp, { ContextData } from './afterlogin/patirel/patmain';
import Experiment from './experi';
import {Routes,Route} from 'react-router-dom';
import * as React from 'react';

function App() {
  return (
   <ContextData data="Sara"> {/* 在这里传入需要共享的data值 */}
    <div>
    <Routes>
      <Route index element={<Exp/>} />
      <Route path="/experi" element={<Experiment/>} />
      </Routes>
    </div>
    </ContextData>
  );
}

export default App;

方案2：仅给指定路由/组件提供Context值 #

删掉App.js外层无参数的ContextData包裹，把带data参数的Provider直接挪到需要消费Context的组件上层，确保消费组件是该Provider的子元素即可，比如仅给/experi路由传值的写法：

// App.js
import Exp, { ContextData } from './afterlogin/patirel/patmain';
import Experiment from './experi';
import {Routes,Route} from 'react-router-dom';
import * as React from 'react';

function App() {
  return (
    <div>
    <Routes>
      <Route index element={<Exp/>} />
      <Route path="/experi" element={
        <ContextData data="Sara">
          <Experiment/>
        </ContextData>
      } />
      </Routes>
    </div>
  );
}

export default App;

补充说明：如果创建Context时没有传入默认值，即createContext()没有传参，当组件上层没有匹配的Provider时，useContext返回值就是undefined，如果需要兜底值，可以在创建Context时传入默认参数，比如createContext('默认值')。

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