0
votes

Réagir - TypeError - this.state.movies.map

Je travaille sur un projet de location de films appelé MoVid, qui est en React et JavaScript. Voici mon code:

App.js

import * as genresAPI from "./fakeGenreService";

const movies = [
{
  _id: "5b21ca3eeb7f6fbccd471815",
  title: "Terminator",
  genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  numberInStock: 6,
  dailyRentalRate: 2.5,
  publishDate: "2018-01-03T19:04:28.809Z"
},
{
  _id: "5b21ca3eeb7f6fbccd471816",
  title: "Die Hard",
  genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  numberInStock: 5,
  dailyRentalRate: 2.5
},
{
  _id: "5b21ca3eeb7f6fbccd471817",
  title: "Get Out",
  genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
  numberInStock: 8,
  dailyRentalRate: 3.5
}];

export function getMovies() {
  return movies;
}

export function getMovie(id) {
  return movies.find(m => m._id === id);
}

export function saveMovie(movie) {
  let movieInDb = movies.find(m => m._id === movie._id) || {};
  movieInDb.name = movie.name;
  movieInDb.genre = genresAPI.genres.find(g => g._id === movie.genreId);
  movieInDb.numberInStock = movie.numberInStock;
  movieInDb.dailyRentalRate = movie.dailyRentalRate;

  if (!movieInDb._id) {
    movieInDb._id = Date.now();
    movies.push(movieInDb);
  }

  return movieInDb;
}

export function deleteMovie(id) {
  let movieInDb = movies.find(m => m._id === id);
  movies.splice(movies.indexOf(movieInDb), 1);
  return movieInDb;
}

Movie.jsx

export const genres = [
  { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
  { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
  { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" }
];

export function getGenres() {
  return genres.filter(g => g);
}

fakeGenreService.js

import React, { Component } from "react";
import { getMovies } from "../services/fakeMovieService";

class Movies extends Component {
    state = {};

    render() {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Genre</th>
                        <th>Stock</th>
                        <th>Rate</th>
                    </tr>
               </thead>
           <tbody>
               {this.state.movies.map(movie => (
                   <tr>
                       <td>{movie.title}</td>
                       <td>{movie.genre.name}</td>
                       <td>{movie.numberInStock}</td>
                       <td>{movie.dailyRentalRate}</td>
                   </tr>
               ))}
           </tbody>
         </table>
    );
  }
}

export default Movies;

fakeMovieService.js

import React, { Component } from "react";
import Movies from "./components/movies";
import "./App.css";

function App() {
  return (
    <main className="container">
      <Movies></Movies>
    </main>
  );
}

export default App;

J'ai regardé:

Code de réaction lançant «TypeError: this.props.data.map n'est pas une fonction»

React JS - Uncaught TypeError: this.props.data.map n'est pas une fonction

Mais ils n'aident pas.

Les 3 autres fichiers de code sont ici . Si vous avez besoin de plus d'informations ou de code, veuillez me demander! Merci d'avance!

javascript reactjs typeerror

3 commentaires

Veuillez ajouter votre code à l'endroit où vous obtenez les données des films et attribuez-lui le this.state.movies

@thelonglqd J'ai ajouté le lien vers Trello pour les 3 autres fichiers.

Dans le composant Movie , vous n'avez utilisé getMovies nulle part?

5 Réponses :

0
votes

Vous n'avez aucun film dans votre état depuis le début. Initialisez un tableau à l'intérieur du constructeur:

state = {
    movies: [],
};

0 commentaires

0
votes

this.state.movies n'est pas un tableau. C'est indéfini.

1 commentaires

Si ce cas, l'erreur doit être can not read property map of undefined , pas la map is not a function

0
votes

Dans l' state du Movie Component , vous devez ajouter un tableau de movies comme

<tbody>
     {this.state.movies.map(movie => (
    <tr>
     <td>{movie.title}</td>
     <td>{movie.genre.name}</td>
     <td>{movie.numberInStock}</td>
     <td>{movie.dailyRentalRate}</td>
    </tr>
   ))}
</tbody>

puis mettez à jour l'état des films. Après cela, vous pouvez mapper le tableau des movies comme ceci

state = {
movies:[]
};

0 commentaires

0
votes

J'ai exécuté votre code et l'erreur que vous avez obtenue est Cannot read property 'map' of undefined .

Premièrement, vous n'utilisez getMovies nulle part, vos données de films ne sont pas disponibles dans le composant Movies

Deuxièmement, vous devez initialiser les films en tant que tableau vide.

Le code de votre composant Movies doit ressembler à ceci:

import React, { Component } from "react";
import { getMovies } from "../services/fakeMovieService";

class Movies extends Component {
    state = { movies: [] };

    componentDidMount() {
      this.setState({ movies: getMovies() });
    }

    render() {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Genre</th>
                        <th>Stock</th>
                        <th>Rate</th>
                    </tr>
               </thead>
           <tbody>
               {this.state.movies.map(movie => (
                   <tr>
                       <td>{movie.title}</td>
                       <td>{movie.genre.name}</td>
                       <td>{movie.numberInStock}</td>
                       <td>{movie.dailyRentalRate}</td>
                   </tr>
               ))}
           </tbody>
         </table>
    );
  }
}

export default Movies;

0 commentaires

0
votes

Je travaillais sur le même projet, on dirait qu'il vous manquait des crochets dans la fonction de pagination de la méthode de valeur:

const startIndex = (pageNumber-1) * pageSize;

return _(items)
   .slice(startIndex)
   .take(pageSize)
   .value();

0 commentaires