React TypeError - this.state.movies.map

Question

我正在做一个叫MoVid的电影租赁项目，这个项目是React和JavaScript。这是我的密码：

App.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;

Movie.jsx

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;

fakeGenreService.js

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

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

fakeMovieService.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;
}

我看过：

响应抛出“TypeError: this.props.data.map不是函数”的代码

TypeError: this.props.data.map不是一个函数

但他们帮不上忙。

其他3个代码文件在这里中。如果您需要更多的信息或代码，请问我！提前感谢！

Answer 1

我运行了您的代码，您得到的错误是Cannot read property 'map' of undefined。

首先，您不在任何地方使用getMovies，您的电影数据在Movies组件中不可用。

其次，应该将电影初始化为空数组。

您的Movies组件代码应该如下所示：

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;

Answer 2

从一开始你就没有本州的电影。初始化构造函数内的数组：

state = {
    movies: [],
};

Answer 3

this.state.movies不是数组。它还没有定义。