javascript - 使用 Swapi 获取数组对象的数据值

Question

我正在构建一个应返回其 ID、缩略图、标题、剧集编号和发行日期的电影网格。

如何映射 Swapi 的这些值？ ？ (缩略图在 img 文件夹中)

ListFilms.js 组件:

import React, { Component } from "react";

class ListFilms extends Component {
  render() {
    const films = this.props.films;
    console.log(films);
    return (
      <div className="row">
        <table className="table table-dark">
          <thead>
            <tr>
              <th scope="col">Id</th>
              <th scope="col">Thumbnail</th>
              <th scope="col">Film Title</th>
              <th scope="col">Released Date</th>
              <th scope="col">Episode Number</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">{films.id}</th>
              <td>
                <img src={} alt={}>
              </td>
              <td>{films.title}</td>
              <td>{films.created}</td>
              <td>{films.episode_id}</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

export default ListFilms;

CodeSandbox Demo

Answer 1

您可以使用以下代码遍历项目列表并显示它。我已将图像移动到 public 文件夹，以避免 webpack 将它们捆绑为代码的一部分。

https://codesandbox.io/s/z6y768y37p

<tbody>
        { films.map((film,index) => (<tr key={film.title}>
          <th scope="row">{index + 1}</th>
          <td><img src={`/img/${film.title}.jpeg` width="40px"} /></td>
          <td>{film.title}</td>
          <td>{film.release_date}</td>
          <td>{film.episode_id}</td>
        </tr>)) }
</tbody>