📜  React 电影 - Javascript 代码示例

📅  最后修改于: 2022-03-11 15:01:48.383000             🧑  作者: Mango

代码示例1
import React from "react";
import { getMovies, getMovie } from "../services/fakeMovieService";
import Pagination from "./pagination";
import { paginate } from "../utils/paginate";
import { getGenres } from "../services/fakeGenreService";
import _ from "lodash";
import { genres } from "../utils/genre";
import Genre from "./genre";
import Like from "./like";
class Movies extends React.Component {
  state = {
    movies: getMovies(),
    pageSize: 4,
    currentPage: 1,
  };
  handelPageChange = (page) => {
    this.setState({ currentPage: page });
  };
  // handelGenre = (genre) => {
  //   const movies = genres(genre, this.state.movies);
  //   this.setState({ movies });
  //   console.log(genre.name);
  // };
  // handelAllGenre = () => {
  //   const movies = getMovies();
  //   console.log(movies);
  //   this.setState({ movies });
  // };

  handelLike = (movie) => {
    const movies = [...this.state.movies];
    const index = movies.indexOf(movie);
    movies[index] = { ...movies[index] };
    movies[index].liked = !movies[index].liked;
    this.setState({ movies });
  };
  render() {
    const { movies: allMovies, pageSize, currentPage } = this.state;
    const { length: count } = this.state.movies;
    const movies = paginate(allMovies, pageSize, currentPage);
    return (
      
        
{/* */}
{movies.map((movie) => ( ))}
Title Genre Stocks Rating liked
{movie.title} {movie.genre.name} {movie.numberInStock} {movie.dailyRentalRate} this.handelLike(movie)} />
); } } export default Movies;