如何将 API 信息从 React 组件传递到另一个组件？

Question

i am fighting with a react app with a movie API ( https://developers.themoviedb.org ) hahaha. I have a list component with movie and tv cards. I map a list state and put the info in my cards (id, title and poster). When i click in my card, the site must show movie information. So, i have another component named movies.jsx and there i have another three components: hero.jsx (who contains a img from the movie), menuHero.jsx (a menu) and movieInfo.jsx (that contains the title, a little desc from the movie and blabla). I need fill this three components with the api info. My component movies.jsx show me the id (i put that in a < h2> just for see if its working) but i don't find a way to give them the api info to my another three child components.

Also, the movieData its empty. So, i dont know what im doing wrong.

Here is my code:

const Movies = props => {
    
    const [movieData, setMovieData] = useState([]);
    const { match } = props;
    const movieId = match.params.id;
   
    
    useEffect(() => {
        axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${api-key}`)
            .then(res => {
                setMovieData(res.data);
                console.log(movieData)
            }).catch(error => console.log(error))
    }, []);

    return(
        <div className="container-section">
            <h2>{match.params.id}</h2>
            <Hero />
            <MenuHero />
            <MovieInfo />
        </div>
    )
}

export default Movies; 
    enter code here

Answer 1

You can pass that data as props:

return movieData && (
        <div className="container-section">
            <h2>{match.params.id}</h2>
            <Hero movieData={movieData} />
            <MenuHero movieData={movieData} />
            <MovieInfo movieData={movieData} />
        </div>
    )

More info: https://reactjs.org/docs/components-and-props.html

Answer 2

You need to get an API key and movie ID from themoviedb, ${movieId} ${api-key} should be your key which should be stored as an environment variable. (.env) file and to access that key you'll need to use process.env.(VARIABLE_NAME) to get the desired value. That's why you're not getting any data from your get requests.