reactjs - 反应电影数据库应用程序数据.JSON

问题描述

我正在关注 Roy Derks——React Projects 这本书，我正在研究“创建电影列表应用程序”项目，该项目仅显示 data.JSON。

这是我的项目结构：

数据.JSON：

[
  {
    "id": 1,
    "title": "Avatar",
    "distributor": "20th Century Fox",
    "year": 2009,
    "amount": "$2,787,965,087",
    "img": {
      "src": "media/avatar.jpg",
      "alt": "avatar"
    },
    "ranking": 1
  },
  {
    "id": 2,
    "title": "Titanic",
    "distributor": "20th Century Fox",
    "year": 1997,
    "amount": "$2,187,463,944",
    "img": {
      "src": "media/titanic.jpg",
      "alt": "titanic"
    },
    "ranking": 2
  },
  {
    "id": 3,
    "title": "Star Wars: The Force Awakens",
    "distributor": "Walt Disney Studios Motion Pictures",
    "year": 2015,
    "amount": "$2,068,223,624",
    "img": {
      "src": "media/star_wars_the_force_awakens.jpg",
      "alt": "star_wars_the_force_awakens"
    },
    "ranking": 3
  },
  {
    "id": 4,
    "title": "Avengers: Infinity War",
    "distributor": "Walt Disney Studios Motion Pictures",
    "year": 2018,
    "amount": "$2,048,359,754",
    "img": {
      "src": "media/avengers_infinity_war.jpg",
      "alt": "avengers_infinity_war"
    },
    "ranking": 4
  },
  {
    "id": 5,
    "title": "Jurassic World",
    "distributor": "Universal Pictures",
    "year": 2015,
    "amount": "$1,671,713,208",
    "img": {
      "src": "media/jurassic_world.jpg",
      "alt": "jurassic_world"
    },
    "ranking": 5
  }
]

Card.js：

import React from 'react';


const Card = ({ movie }) => {
  return (
    <div>
      <h2> {`#${  movie.ranking } - ${ movie.title } (${ movie.year })`} </h2>
      <img src = { movie.img.src } alt={ movie.img.alt } width='200' />
      <p> {`Distibutor: ${ movie.distributor }`} </p>
      <p> {`Amount: ${ movie.amount }`} </p>
    </div>

  );
};


export default Card;

List.js

import React, {Component} from 'react';
import Card from '../components/card/Card'

class List extends Component
{
  constructor(){
    super()
    this.state = {
      data: [],
      loading: true
    };
  }

  async componentDidMount()
  {
    const movies = await fetch('../assets/data.json');
    const moviesJSON = await movies.json();

    if(moviesJSON)
    {
      this.setState({
        data: moviesJSON,
        loading: false
      });
    }
  }
render()
{
  const { data, loading} = this.state;

  if(loading)
  {
    return <div>Loading... </div>
  }

  return data.map(movie => <Card key = { movie.id } movie = { movie } />);


}
}

export default List;

应用程序.js：

import './App.css';
import List from './containers/List';

function App() {
  return (
    <div className="App">
      <h1>Let's Do it!</h1>
      <List />

    </div>
  );
}

export default App;

输出显示“正在加载......”，我应该得到电影列表。我不知道为什么加载不包含错误值并且应该显示电影列表。我遵循了作者给出的每一条指令。

参考书：https ://www.amazon.com/React-Projects-real-world-applications-scratch/dp/1789954932/ref=sr_1_1?dchild=1&keywords=React+Projects&qid=1619528399&s=books&sr=1-1

编辑：仍然无法正常工作，有人可以帮忙吗？

标签： reactjsreact-hooks

reactjs - 反应电影数据库应用程序数据.JSON

问题描述

解决方案

推荐阅读