上下文 API 没有在 React 中更改其全局级别的状态

Question

这是我的App.js文件

import 'bootstrap/dist/css/bootstrap.min.css';
import Run from './Signupin/mainpage';
import Exp from './afterlogin/patirel/patmain';
import Exp1 from './afterlogin/adminrel/designdb';
import Exp2 from './afterlogin/adminrel/consult';
import Exp3 from './afterlogin/adminrel/support';
import Exp4 from './afterlogin/patirel/one';
import PostRequest from './afterlogin/adminrel/one';
import Docc from './afterlogin/docrel/one';
import {Routes,Route} from 'react-router-dom';
import Done from "./appointment/appointment";
import * as React from 'react';


function App() {

return (
<div>
<Routes>
<Route index element={<Run/>} />
<Route path="/patmain" element={<Exp/>} />
<Route path="/adco" element={<PostRequest/>} />
<Route path="/adco1" element={<Exp1/>} />
<Route path="/adco2" element={<Exp2/>} />
<Route path="/adco3" element={<Exp3/>} />
<Route path="/adco4" element={<Exp4/>} />
<Route path="/docc1" element={<Docc/>} />
<Route path="/appoint" element={<Done/>} />
</Routes>
</div>

);
}
export default App;

我的index.js文件

import React from 'react';
import ReactDom from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from 'react-router-dom';
import {Appointment} from "./appointment/Context"

ReactDom.render(<BrowserRouter><Appointment><App /></Appointment></BrowserRouter>, document.querySelector('#root'));

我的上下文提供程序文件，其中状态emailinfo未在此文件中更新

import {createContext,useState } from 'react';
import * as React from 'react';



export const Contextforabhishek= createContext({});

export const Appointment=({children})=>{

const [emailinfo, setemailinfo] = useState("NA");//Not Getting Updated at Global Level

const yy={emailinfo,setemailinfo}
return(
<>
<Contextforabhishek.Provider value={yy} >{children}</Contextforabhishek.Provider>

</>
);

}

这是我想要数据的文件，文件Patmain到文件约会。我在this里面使用了useContext

import "./Appyss.css";
import { Button, Modal, Dropdown} from "react-bootstrap";
import { useState, useEffect,useContext} from "react";
import { Contextforabhishek } from '../../appointment/Context';
import * as React from 'react';
//import { Link } from 'react-router-dom'

function Patmainss(props) {
return (
<div className="forall">
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
{props.title} {props.Introduction}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>{props.Description}</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}

function Patmain() {
const {emailinfo,setemailinfo }=useContext(Contextforabhishek);
const infor=(e)=>{
const m=e.target.id;
setemailinfo(m);
}

console.log(emailinfo);{/* THE STATE IS BEING CHANGED HERE BUT THAT SAME STATE IS NOT OBTAINABE AT FILE APPOINTMENT*/}

const [runing, setRuning] = useState(
{
runing:"2"
},
);


const Runing = (e) => {
setRuning({
runing:"2"

});
};  

const [modalShow, setModalShow] = useState(false);
const [Fetchdoc, setFetchdoc] = useState([
{

},
]);
const [doct, setDoct] = useState({
First_Name: "",
Intro:"",
Description: "",
Check_Up_Address:""
});

const [renn,setRenn] = useState({
renn:"a",
});
const handleRenn = (e) => {
Runing();
setRenn({
renn:"a",

});
};  
const handleRenn1 = (e) => {
Runing();
setRenn({
renn:"aa",

});

};  
const handleRenn2 = (e) => {
Runing();
setRenn({
renn:"aaa"
});

};  
const handleRenn3 = (e) => {
Runing();
setRenn({
renn:"aaaa"
});

};  
const handleRenn4 = (e) => {
Runing();
setRenn({
renn:"aaaaa"
});

};  

useEffect(() => {
if(runing.runing==="2")
{

if(renn.renn==="a"){
fetch("http://localhost:8001/docconfirmed")
.then((res) => res.json())
.then((jsonRes) => setFetchdoc(jsonRes),[]);}
else if(renn.renn==="aa"){

const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ practice:'Orthopaedic' })
};
fetch('http://localhost:8001/docconfirmed1',requestOptions )
.then(response => response.json())
.then((jsonRes) => setFetchdoc(jsonRes));

}
else if(renn.renn==="aaa"){

const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ practice:'Paediatrician' })
};
fetch('http://localhost:8001/docconfirmed1',requestOptions )
.then(response => response.json())
.then((jsonRes) => setFetchdoc(jsonRes));

}
else if(renn.renn==="aaaa"){

const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ practice:'General-Physician' })
};
fetch('http://localhost:8001/docconfirmed1',requestOptions )
.then(response => response.json())
.then((jsonRes) => setFetchdoc(jsonRes));

}
else if(renn.renn==="aaaaa"){

const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ practice:'Audiologist' })
};
fetch('http://localhost:8001/docconfirmed1',requestOptions )
.then(response => response.json())
.then((jsonRes) => setFetchdoc(jsonRes));

}
runing.runing="stop";

}

});
const handleClick = (e) => {
setModalShow(true);
const { name, alt,id} = e.target;


setDoct({
First_Name: name,
Intro: id,
Description: alt,
});
};


return (
<div>
<div className="column">
<h2 style={{color:'purple',fontWeight: 'bold'}} className="msgs">Click On The Images To Get More Details On Your-Aid Doctors</h2>
<div style={{marginLeft : 50, marginTop : 20, marginDown : 90,  display: "block", width: "30%", height: "40%" }}>
<Dropdown>
<Dropdown.Toggle variant="primary" id="dropdown-basic" style={{paddingTop : 12,paddingLeft : 795, paddingBottom : 12, paddingRight : 20, paddingDown : 100, }}>
<h4 style={{textAlign: 'left',color:'black'}}>
Click Here To Choose The Required Specialisation
</h4>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item onClick={handleRenn}>View All Doctors</Dropdown.Item>
<Dropdown.Item onClick={handleRenn1}>Orthopaedic</Dropdown.Item>
<Dropdown.Item onClick={handleRenn2}>Paediatrician</Dropdown.Item>
<Dropdown.Item onClick={handleRenn3}>General-Physician</Dropdown.Item>
<Dropdown.Item onClick={handleRenn4}>Audiologist</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
<div
className="forall"
>
{Fetchdoc
.sort((a, b) => {
var titleA = a.title;
var titleB = b.title;
if (titleA < titleB) {
return -1;
}
if (titleA > titleB) {
return 1;
}
return 0;
})
.map((doct) =>{
const First=doct.First_Name;
const Last=doct.Last_Name;
const Lasts=doct.practice;
//const Emaill=doct.Email;
return (
// handleEmailInfo(e.target.id)}
<l1><ul><button onClick={infor} className="btn btn-dark" style={{marginLeft : 200, marginTop : 80, display: "block", width: "15%", height: "40%" }} id={doct.Email} >Book An Appointment With { First }</button>
<div className="mores">

<img
//key={/**/}
id={" ( Call@" +String(doct.Doctors_Phone)+" )"}
src={doct.Image}
alt={String(doct.Description)+" Email-ID@ "+String(doct.Email)}
name={String(doct.First_Name)+" "+String(doct.Last_Name)}
width="260" 
height="190"
onClick={handleClick}
></img>
<l1 style = {{ marginLeft : 20, color:'black', 'font-size': '32px',fontWeight:100}} > {String(First)+" "+String(Last)}<ul style={{ marginTop : 10, color:'white', 'font-size': '26px',fontWeight:80}}>{String(Lasts)}</ul></l1> 
<br></br>
<br></br>


</div>
</ul></l1>
);
})}
</div>

<Patmainss
show={modalShow}
onHide={() => setModalShow(false)}
title={doct.First_Name}
Introduction={doct.Intro}
Description={doct.Description}
/>


</div>
</div>
);

}

export default Patmain;

file Appointment在这里我想要上下文数据，但状态总是在NA emailinfo不改变全局级别的状态

import * as React from 'react';
import {useContext } from 'react';
import { Contextforabhishek } from './Context';

export default function All(){
const {emailinfo}=useContext(Contextforabhishek);//state is unchanged trying to change the state in Patmain file there it changes but here it doesn't change

console.log("obtained",emailinfo)
return(
<div>
<h1>(Done Page) Book an Appointment with: {emailinfo}</h1>
{/* <button onClick={(e)=>{setemailinfo("ll")}}>click</button> */}
</div>
);
}

已经好几天了，仍然不明白为什么会发生这种情况，请帮帮我

Answer 1

在所有组件中，您似乎没有从上下文中提取setEmailInfo