Блог

использование (createContext) не является визуализацией других компонентов. Пожалуйста, проверьте мой код. Если я не использую контекст, другие компоненты работают нормально, но при использовании контекста не отображается ни один компонент. Вот подробная информация о моем коде. Я попытался удалить контекст , и он отлично работает без него, но мне понадобится контекст в некоторых компонентах, я не могу удалить контекст .

App.js Компоненты- —

 import "./App.css";

import Nav from "./Nav";

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";


import Students from "./Students";
import Mentors from "./Mentors";
import Home from "./Home";
import Student from "./Student";
import Mentor from "./Mentor";

//import { StudentsProvider } from "./StudentsContext";

import { MentorsProvider } from "./MentorsContext";

function App() {
  return (
    <div className="App">
      <Router>
        {/* <StudentsProvider>  */}
        <MentorsProvider>
          <Nav />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/students" component={Students} />

            <Route path="/students/:id" component={Student} />

            <Route exact path="/mentors" component={Mentors} />
            <Route path="/mentors/:id" component={Mentor} />
          </Switch>
          {/* </StudentsProvider> */}
        </MentorsProvider>
      </Router>
    </div>
  );
}

export default App;

This is MentorsContext.js -- 
import { useState,     createContext,     useEffect } from "react";

export const MentorsContext = createContext();

export const MentorsProvider = (props) => {
  const [mentors, setMentors] = useState([]);

  useEffect(() => {
    const getMentors = async () => {
      try {
        const res = await fetch("http://localhost:3001/mentors");
        const data = await res.json();
        //console.log(data);
        setMentors(data);
      } catch (err) {
        console.log(err);
      }
      getMentors();
    };
  }, []);

  return (
    <MentorsContext.Provider value={[mentors, setMentors]}>
      {props.childern}
    </MentorsContext.Provider>
  );
};


 

это children не должно быть childern

 <MentorsContext.Provider value={[mentors, setMentors]}>
      {props.children}
</MentorsContext.Provider>