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>

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

1 个答案: