Блог

я борюсь с приложением react с помощью movie API (https://developers.themoviedb.org ) хахаха. У меня есть компонент списка с карточками фильмов и ТВ. Я отображаю состояние списка и помещаю информацию в свои карточки (идентификатор, заголовок и плакат). Когда я нажимаю на свою карточку, на сайте должна отображаться информация о фильме. Итак, у меня есть другой компонент с именем movies.jsx, и там у меня есть еще три компонента: hero.jsx (который содержит изображение из фильма), menuHero.jsx (меню) и movieInfo.jsx (который содержит заголовок, небольшое отступление от фильма и blabla). Мне нужно заполнить эти три компонента информацией API. Мой компонент movies.jsx показывает мне идентификатор (я помещаю его в < h2>, просто чтобы посмотреть, работает ли он), но я не нахожу способа передать им информацию API для моих еще трех дочерних компонентов.

Кроме того, movieData пуст. Итак, я не знаю, что я делаю не так.

Вот мой код:

 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
  

Вы можете передать эти данные в качестве реквизита:

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

Дополнительная информация:https://reactjs.org/docs/components-and-props.html

Вам нужно получить ключ API и идентификатор фильма из themoviedb, $ {MovieID} $ {api-key} должен быть вашим ключом, который должен храниться как переменная среды. (.env) файл и для доступа к этому ключу вам нужно использовать process.env.(ИМЯ_ПЕРЕМЕННОЙ), чтобы получить желаемое значение. Вот почему вы не получаете никаких данных из своих запросов get.