反应-类型错误-this.state.movi​​es.map

Question

我正在开发一个名为 MoVid 的电影租赁项目，它使用 React 和 JavaScript。这是我的代码：应用程序.jsimport React, { Component } from "react";import Movies from "./components/movies";import "./App.css";function App() {  return (    <main className="container">      <Movies></Movies>    </main>  );}export default App;电影.jsximport 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;伪流派服务.jsexport const genres = [  { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },  { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },  { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" }];export function getGenres() {  return genres.filter(g => g);}假电影服务.jsimport * 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}];

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

在stateof 中Movie Component，您需要添加movies数组，例如

state = {

movies:[]

};

然后更新电影状态。之后，您可以movies像这样映射数组

<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>