Im essayant d'obtenir des données, d'une API, puis de les consommer à partir d'un autre composant hook.

Mais j'ai cette erreur

Ceci est mon App.js

 import React, {useEffect, useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';
import MainRouter from "./core/MainRouter";
import {MovieProvider} from "./context/MovieContext";
import axios from 'axios';
function App() {
    const [tagCat,setTagCat] = useState([]);
    const getMovieInfo = async ()=>{
        const res = await axios.get('/get/tag_category');
        //for testing
        setTagCat(res.data.data)
    };
    useEffect(()=>{
        getMovieInfo();
    },[]);
  return (
      <MovieProvider value={tagCat}>
          <Router>
            <MainRouter/>
          </Router>
      </MovieProvider>
  );
}

export default App;

MovieContext.js

    import React, {useContext} from "react";



const MovieContext = React.createContext({});

const MovieProvider = MovieContext.Provider;
const MovieConsumer = MovieContext.Consumer;
export default MovieContext;
export {MovieProvider,MovieConsumer};

Consommer à partir de ce composant PageNav

PageNav.js

    import React, {useContext, useEffect, useState} from 'react';
import {Link} from 'react-router-dom';
import MovieContext,{MovieConsumer} from "../../context/MovieContext";
const PageNav = ()=>{
    const tagCat = useContext(MovieContext);
    const [category,setCategory] = useState([]);
    useEffect(()=>{
        setCategory(tagCat.main_category);
    })
    return (
        <React.Fragment>
            <div>
                <header className="content__title">
                    <h1>Welcome! (Mingalarpar) <small>
                        Feel Free to use any data , btw we need more suggest from  you.
                    </small></h1>
                </header>
                <div className="toolbar">
                    <nav className="toolbar__nav">
                        **{console.log(category[0])}**
                        <a className="active" href="#">Following</a>
                        <a href="groups.html">Groups</a>
                    </nav>
                </div>
            </div>

        </React.Fragment>
    )
};
export  default PageNav;

Je vois les données dans devtools, mais je ne peux pas mapper les données i.n. category.map () // erreur

enter image description here

Je vous remercie

0
Nub Coder 26 avril 2020 à 21:56

2 réponses

Meilleure réponse

La valeur de ContextProvider est extraite de manière asynchrone et ne sera donc pas disponible lors du rendu initial du composant. Si vous essayez de définir un champ spécifique à partir de celui-ci dans l'état du composant PageNav, cela vous lancera une erreur

Vous devez vérifier son existence avant de l'utiliser, vous n'avez pas non plus besoin de stocker la valeur obtenue à partir du contexte dans l'état car vous pouvez la dériver directement

const PageNav = ()=>{
    const tagCat = useContext(MovieContext);
    const [category,setCategory] = useState([]);
    return (
        <React.Fragment>
            <div>
               {/* othercode */}
                <div className="toolbar">
                    <nav className="toolbar__nav">
                        {tatCat.main_category && tatCat.main_category.map(() => {})} 
                        <a className="active" href="#">Following</a>
                        <a href="groups.html">Groups</a>
                    </nav>
                </div>
            </div>

        </React.Fragment>
    )
};
export  default PageNav;
0
Shubham Khatri 26 avril 2020 à 19:06

Vous ne passez pas d'objet dans le fournisseur de contexte dans App.js. value = {tagcat} sera remplacé par value = {{tagcat}} Essayez ceci

<MovieProvider value={{tagCat}}>
          <Router>
            <MainRouter/>
          </Router>
 </MovieProvider>
0
gautamits 26 avril 2020 à 19:05