Передайте ссылку из MoviesContainer в MovieDetail с помощью реакции и movieDB Api. - PullRequest
Новая
       38

Передайте ссылку из MoviesContainer в MovieDetail с помощью реакции и movieDB Api.

0 голосов
/ 11 апреля 2020

Я создаю сайт mov ie, который отображает изображение mov ie в MoviesContainer, когда пользователь нажимает GET INFO, он переводит их на экран MovieDetail mov ie info. Я использую MovieDB API для создания этого.

Попытка подключить Получить информацию к MovieDetail путем создания "/movie/$ndomfilms.id}" из MoviesContainer и Server.

MoviesContainer. js

  render(){
    const imgURL= 'http://image.tmdb.org/t/p/original';
    const movies= this.state.moviesList.map((films, index)=> {
      return(
        <div key={ index } className='movie-card'>
        <div className="container">
          <img style={{ height: '85%', width: '100%' }} src={ imgURL + films.poster_path } alt='movie poster'></img>
                <div className="overlay">
                    <div className="movie_nam">
                       <div className="MCview">{ films.film_name }</div>
                             <h1>{ films.release_dates}</h1>
                              <div className="MCoverview">{ films.synopsis_long }</div>
                        </div>
                    <Link  to={ `${config.apiURL}/movie/${films.id}${config.apiKey}&language=en-US` }>
                         <button  className='successW'> GET INFO </button>
                    </Link>

                </div>
          </div>
        </div>
      )
    });

    return(
      <div className='movies-container-main'>
        { movies }

      </div>
    )
  }
}

MovieDetail. js

import React, { Component } from 'react';
import axios from 'axios';
import './MovieDetail.css';
//import { Link } from 'react-router-dom';
import config from '../../config.js';
import film from '../MoviesContainer/MoviesContainer.js';



export default class MovieDetail extends Component{
  constructor(props){
    super(props);

    this.state= {
      movie: []
    }
  }
  componentWillMount(){
    axios.get(`/api/movies/${film.id}${config.apiKey}`).then(response=> {
      this.setState({ moviesList: response.data });
    });
  }

  render(){

      return(
        <div className='moviecd'>
          <img style={{ height: '85%', width: '100%' }} src={ film.backdrop_path} alt='movie poster'></img>
          <div className="MCview">{ film.name }</div>
          <div className="MCview">{ film.overview }</div>
        </div>
      )

    }
  }

сервер. js

app.get(`${films.id}`, async (req, res, next)=> {
   console.log(`Movie with id: ${ req.params.id } searched `);
   axios.get(`${apiURL}/movie/{films.id}${apiKey}&language=en-US`).then(async response=> {
           console.log(response.data.films)
           console.log(this.params.film.id)
           let films = await response.data.films.map(film =>{
               return {
                   id:film.id,
                   name:film.name,
                   textLong:film.overview,
                   picimage:film.backdrop_path
               }
           })
       res.status(200).json(films);
     }).catch(err => {
         console.log(err);
     });
});
...