Props值在REACT中通过Context API传递时是Undefined

Question

My Provider File of Context API (Exp File)

import react form 'react';
import {createContext} from "react";
export const ContextforFile = createContext();
export function ContextData(props){
let rdata=props.data
return(
<>
<p>{rdata}</p>  //I am able to Get the Data here NO ISSUES TILL HERE
<ContextforFile.Provider value={rdata} >{props.children}</ContextforFile.Provider>
</>
);
}
function A() {
return (
<div>
<ContextData data="Sara" />
</div>
);
}
export default A;

My App.js File

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>
<div>
<Routes>
<Route index element={<Exp/>} />
<Route path="/experi" element={<Experiment/>} />
</Routes>
</div>
</ContextData>
);
}
export default App;

只道具。数据值不会出现在这里，而其他值可以很容易地获得这是Experi文件我想在这里获取我的值我的Consumer文件

import * as React from 'react';
import { useContext } from 'react';
import { ContextforFile } from './afterlogin/patirel/patmain';
export default  function Experi(){
const first= useContext(ContextforFile);
return(
<div>
<h1>ISSUE is Here Other VALUES are COMING BUT NOT props.data: {first}</h1>
</div>
);
}

请帮忙!已经好几天了，我不知道我错过了什么?我该如何解决?

Answer 1

你的函数ContextData没有返回任何东西。Yoo应该返回ContextforFile.Provider

Answer 2

获取未定义值的可能性有很多

例如:

也许，你从props.data得到undefined。也许是因为您没有为提供默认值createContext.

试试下面的步骤，这些可能对你有帮助。

1. 必须将默认值传递给createContext如果需要。

export const ContextforFile = createContext([value it could be any thing like array, string or object etc.]);

2. 当你创建一个钩子时，你必须这样写代码:

你的版本:const first= useContext(ContextforFile);

推荐版本:const useFirst= () => useContext(ContextforFile);

3. 像这样使用这个钩子

const first= useFirst()

在这里你可以找到区别:沙箱示例