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

Question

我正在开发一个名为 MoVid 的电影租赁项目，它使用 React 和 JavaScript。这是我的代码：

应用程序.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;

电影.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;

伪流派服务.js

export const genres = [

  { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },

  { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },

  { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" }

];

export function getGenres() {

  return genres.filter(g => g);

}

假电影服务.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

}];

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 {&nbsp; &nbsp; state = { movies: [] };&nbsp; &nbsp; componentDidMount() {&nbsp; &nbsp; &nbsp; this.setState({ movies: getMovies() });&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table className="table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Title</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Genre</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Stock</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Rate</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.state.movies.map(movie => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>{movie.title}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>{movie.genre.name}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>{movie.numberInStock}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>{movie.dailyRentalRate}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</table>&nbsp; &nbsp; );&nbsp; }}export default Movies;

Answer 2

从一开始，您所在的州就没有电影。在构造函数中初始化一个数组：state = {&nbsp; &nbsp; movies: [],};

Answer 3

在stateof 中Movie Component，您需要添加movies数组，例如state = {movies:[]};然后更新电影状态。之后，您可以movies像这样映射数组<tbody>&nbsp; &nbsp; &nbsp;{this.state.movies.map(movie => (&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp;<td>{movie.title}</td>&nbsp; &nbsp; &nbsp;<td>{movie.genre.name}</td>&nbsp; &nbsp; &nbsp;<td>{movie.numberInStock}</td>&nbsp; &nbsp; &nbsp;<td>{movie.dailyRentalRate}</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp;))}</tbody>