Javascript Can'；在React JS中导入数组函数后检索我的电影数据

我无法通过数组从fakeGenreService.js传递数据

请检查所呈现数据的屏幕截图

你会看到所有的东西都在被渲染，而不是fakeGenreService.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
  },
  {
    _id: "5b21ca3eeb7f6fbccd471819",
    title: "Trip to Italy",
    genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
    numberInStock: 7,
    dailyRentalRate: 3.5
  },
  {
    _id: "5b21ca3eeb7f6fbccd47181a",
    title: "Airplane",
    genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
    numberInStock: 7,
    dailyRentalRate: 3.5
  },
  {
    _id: "5b21ca3eeb7f6fbccd47181b",
    title: "Wedding Crashers",
    genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
    numberInStock: 7,
    dailyRentalRate: 3.5
  },
  {
    _id: "5b21ca3eeb7f6fbccd47181e",
    title: "Gone Girl",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
    numberInStock: 7,
    dailyRentalRate: 4.5
  },
  {
    _id: "5b21ca3eeb7f6fbccd47181f",
    title: "The Sixth Sense",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
    numberInStock: 4,
    dailyRentalRate: 3.5
  },
  {
    _id: "5b21ca3eeb7f6fbccd471821",
    title: "The Avengers",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
    numberInStock: 7,
    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;
}

请告诉我哪里出了问题

请务必让我知道为什么没有呈现我的数据，以及我需要在代码中进行哪些更改 我将非常感谢你的帮助

我正在上传下面的三个文件

App.js

fakeGenreService.js

movies.js

请检查我是否在状态块中正确传递数组``

这里是App.js

这里是fakegenreService.js

这里是movies.js

这是developmentserver的最终结果

尝试了数组函数的各种troubsleshooting步骤

本部分介绍App.js

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

class App extends Component {
  render() {
   return (
      <main className="container">
        <Movies />
      </main>
    );
  }
}

export default App;

呈现数据的结果如下所示：

---

请告诉我如何在表中呈现getMovies（）函数中定义的电影。

问题似乎就在这里

getMovies

将已返回数组。你把它包在另一个里面。这里，在yout

Movies

Component类中，将其更改为仅函数调用：

constructor(props) {
  super(props);
  this.state = {
    movies: getMovies() // [getMovies()]
  };
}

---

将电影数组包装到第二个数组中。这是行不通的。你应该这样写：

this.state = {
   movies: getMovies()
 };

getMovies（）已返回数组。您正在数组中调用该函数。所以电影有一个数组。像这样的电影：[[datas]]。 在movies.js文件中，在构造函数中执行此更改。它应该会起作用

this.state = {
  movies: getMovies();
}

---

非常感谢你，兄弟！！！！！！！！！！！！！！！！爱你！！！！！这就成功了！！！！！！！！！！！这也是我建议使用typescript的原因。虽然它需要一些时间来适应，但它会发现这个错误

this.state = {
  movies: getMovies();
}