Поток такой:
Нажмите CarouselItem, что вызовет onClick={this.handleId}.
handleId принимает идентификатор, который является опорой нажатых CarouselItem
this.props.dispatch(fetchRecon(movieId)); выполнит действие AJAX, которое вернет данные
и в состоянии Redux установите для свойства, изначально равного moviesRecon:[], значение moviesRecon:[data]. handleId также перенаправит меня на новую страницу, используя this.props.history.push(`/movie-detail?query=${movieId}`);
Теперь я должен быть на компоненте MovieDetailPage, который в настоящее время использует фиктивные данные для компонента Carousel. В идеале, я должен передать this.props.moviesRecon для фильма Carousel.
Попытка сделать это дает мне следующую ошибку:
TypeError: Cannot read property 'map' of undefined
const carousel = this.props.movies.map((item, index) => {
| ^ 51 | return (
52 | <CarouselItem data={item} index={index} key={this.props.movies[index].id} id={this.props.movies[index].id} />
53 | );
Вот компоненты, которые я считаю актуальными:
CarouselItem.js
import React from 'react';
import './CarouselItem.css';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { fetchRecon } from '../../actions/index';
import { withRouter } from 'react-router-dom';
export class CarouselItem extends React.Component{
handleId = e => {
let movieId = this.props.id
console.log("carousel item", movieId);
this.props.dispatch(fetchRecon(movieId));
this.props.history.push(`/movie-detail?query=${movieId}`);
}
render() {
let genres = this.props.genres;
let genreList = this.props.genres.length;
function getGenreText(id) {
for (let i = 0; i < genreList; i++) {
if (genres[i].id == id) {
return genres[i].name;
}
}
}
if (this.props.data) {
return (
<div className="movieContainer" onClick={this.handleId}>
<img className="moviePoster" src={`https://image.tmdb.org/t/p/w500/${this.props.data.poster_path}`} alt={this.props.data.title} />
<h3 className="movieName">{this.props.data.title}</h3>
<p className="movieGenre">{getGenreText(this.props.data.genre_ids[0])}</p>
</div>
);
}
}
}
const mapStateToProps = state => ({
genres: state.app.genres
});
export default connect(mapStateToProps)(withRouter(CarouselItem));
Carousel.js
import React from 'react';
import CarouselItem from '../CarouselItem/CarouselItem';
import './Carousel.css';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
export class Carousel extends React.Component {
componentDidMount() {
// the trick
setTimeout(() => {
this.forceUpdate();
}, 50);
}
render(){
console.log("carousel probs", this.props);
const carousel = this.props.movies.map((item, index) => {
return (
<CarouselItem data={item} index={index} key={this.props.movies[index].id} id={this.props.movies[index].id} />
);
});
return (
<div className="inner-carousel">
<h2>{this.props.title}</h2>
<Slider {...settings}>
{carousel}
</Slider>
<hr className="carousel-divider"/>
</div>
)
}
}
MovieDetailPage.js
import React from 'react';
import { connect } from 'react-redux';
import { Carousel } from '../Carousel/Carousel';
import { withRouter } from 'react-router-dom';
import {fetchRecon} from '../../actions/index';
import { recommended } from './mock';
import { movieDetails } from './mockdetails';
import './MovieDetailPage.css';
export class MovieDetailPage extends React.Component {
componentDidMount() {
window.scrollTo(0, 0);
window.onpopstate = () => {
const params = (new URL(document.location)).searchParams;
const clickedMovie = params.get("query");
console.log('here', clickedMovie);
}
const params = (new URL(document.location)).searchParams;
const movieId = params.get("query");
console.log('here', movieId);
// this.props.dispatch(fetchRecon(movieId));
}
render() {
console.log('movie detail', this.props.moviesRecon, this.props)
return (
<div className="movieDetail">
<div className="movieDetail-container">
<img className="movieDetail-bg" src={`https://image.tmdb.org/t/p/original/or06FN3Dka5tukK1e9sl16pB3iy.jpg`} />
</div>
<div className="main-details">
<Carousel title={"Recommended"} movies={recommended} />
<Carousel title={"Recommended"} movies={recommended} />
<Carousel title={"Recommended"} movies={recommended} />
<Carousel title={"Recommended"} movies={recommended} />
<Carousel title={"Recommended"} movies={recommended} />
<Carousel title={"Recommended"} movies={recommended} />
<Carousel title={"Recommended"} movies={this.props.moviesRecon} />
</div>
</div>
);
}
}
const mapStateToProps = state => ({
isLoading: state.app.isLoading,
moviesRecon: state.app.moviesRecon
});
export default connect(mapStateToProps)(withRouter(MovieDetailPage));
Для MovieDetailPage.js в строке 29 я записываю в консоли следующее:
movie detail undefined
{history: {…}, location: {…}, match: {…}, staticContext: undefined}
history: {length: 17, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …}
location: {pathname: "/movie-detail", search: "?query=456740", hash: "", state: undefined, key: "dyth5r"}
match: {path: "/movie-detail", url: "/movie-detail", isExact: true, params: {…}}
staticContext: undefined
__proto__: Object
Reducers.js, если необходимо, но я уже подтвердил действие, и редуктор правильно устанавливает состояние, так как другие компоненты имеют доступ к moviesRecon.
const initialState = {
isLoading: 0,
genres: [],
moviesPlaying: [],
moviesPopular: [],
moviesUpcoming: [],
moviesTop: [],
movieSearch:[],
moviesRecon: [],
searchTerm: ""
};
export const Reducer = (state=initialState, action) => {
if (action.type === FETCH_RECON_SUCCESS) {
return Object.assign({}, state, {
moviesRecon: action.recon
});
}
}