React 上下文 API - 在 function 中使用上下文，未定义错误

Question

I'm trying to create a global variable that holds false and true when the user switches between view1 and view2. I want to use the Context API to create this global variable with a separate Context.js file that holds the Context and Providers, wrap the components in the App.js file, and consume the context by getting the value of the variable in a function in the appropriate components. I tried following tutorials but I keep getting a displayContext is not defined error, where am I going wrong?

Context.js

    import React, {createContext, useState} from "react";
    
    const viewContext = createContext();
    const viewProvider = ({children}) => {
        const[display, setDisplay] = useState(true);
        return(
            <viewContext.Provider value = {display}>
                {children}
            </viewContext.Provider>
        );
    };
    
    export {viewProvider};

App.js

import React from "react";
import Session from "./components/Session";
import Map from "./components/Map";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./App.css";
import { viewProvider } from "./components/Context";

const App = () => {
  return (
      <viewProvider>
        <Router>
                    <div className="App">
                    <Navbar />
                    <Routes>
                    <Route path="/" exact element={<Map />} />
                    <Route path="/session" element={<Session />} />
                    </Routes>
                </div>
              </Router>
      </viewProvider>
  );
};

export default App;

Map.js

import React, {useContext} from "react";
function Map(){
const display = useContext(viewContext);
console.log("the value of display is", {display});
return(
<div>
//some stuff
</div>
};
}

Answer 1

You need to export viewContext from your Context file:

export const viewContext = createContext(); 

and import it into your Map.js file:

import { viewContext } from 'Context' 

You should also provide setDisplay as value in your Context.js:

<viewContext.Provider value={[display, setDisplay]}>
    {children}
</viewContext.Provider>

Which would necessitate changing

const display = useContext(viewContext) 

to

const [display] = useContext(viewContext) 

in Map.js

Answer 2

import React, {useContext, useState} from "react";

export const defaultSpeedDialContext = [true, () => {
}];
const SpeedDialContext = React.createContext(defaultSpeedDialContext)
export default SpeedDialContext;


export function SpeedDialContextContainer({children}) {
    const [visibility, setVisibility] = useState(defaultSpeedDialContext.visibility)


    return (
        <SpeedDialContext.Provider
            value={[
                visibility,
                setVisibility
            ]}>
            {children}
        </SpeedDialContext.Provider>
    )
}


export function useSpeedDialContext() {
    return useContext(SpeedDialContext)
}

And you can use useSpeedDialContext() in your component

Answer 3

 if you can use redux... its very easy for you, do this. npm install @reduxjs/toolkit --save npm install react-redux --save INDEX.js reducer.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; //Redux import { Provider } from 'react-redux'; // provider ekt wad import { configureStore } from '@reduxjs/toolkit'; import userReducer from './Redux_State_Mangement/Reducer_Actions'; const store = configureStore({ reducer: { userFromIndexjs: userReducer }, }) ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') ); //Reducers.js import { createSlice } from '@reduxjs/toolkit' export const userSlice = createSlice({ name: ""user"", initialState: { //pass krn data obj ek hadagatta value: { name: ""savindu pasintha"", age: """", email: """" }, loginData: { name: """", age: """", email: """" }, profileData: { name: """", age: """", email: """" }, fetchAllData: [{ name: """", age: """", email: """" }] }, reducers: { login: (state, action) => { state.value = action.payload }, loginDataAction: (state, action) => { state.loginData = action.payload }, profileDataAction: (state, action) => { state.profileData = action.payload }, fetchAllDataAction: (state, action) => { state.fetchAllData = action.payload }, } }) //export actions to use in login.js file or we export const { login, loginDataAction, profileDataAction, fetchAllDataAction } = userSlice.actions; //index.js eke reducer export default userSlice.reducer;" Profile.js import React from 'react'; import { useSelector } from 'react-redux'; export default function Profile() { //index.js eke reduser ekekn userFromIndexj ekaccess krn ek //-> features eke initial stste eke value kiyn obj ek const dataObj = useSelector((state) => state.userFromIndexjs.value); return ( <div>Profile <div> <h1>Name: {dataObj.name}</h1> <h1>Age:{dataObj.age} </h1> <h1>Email: {dataObj.email}:</h1> </div> </div> ) }" //Login.js import React from 'react'; import { useDispatch } from 'react-redux'; import { login } from '../Reducer_Actions'; export default function Login() { const dispatch = useDispatch(); //dispatch({ name: ""kamal"", age: ""20"", email: ""ex@gmail.com"" }); return ( <div>Login page <div> <button onClick={() => { dispatch(login({ name: ""kamal"", age: ""20"", email: ""ex@gmail.com"" })); }}>Login</button> </div> </div> ) }