Как создать карточку персонажа по SWAPI? React JS

Question

Новичок в React JS. Хочу сделать карточки персонажей. Не понимаю самой реализации, до этого с API никогда не работала. Ниже код. По идее, хотелось бы, все из раздела people отображались каждый в своей карточке. Подскажите, пожалуйста, как загружать данные из SWAPI и как сделать эти карточки?

import Ccomponent from './Components/Ccomponent';
import axios from 'axios';
import React, { useState } from 'react';

function App() {
  const [peoples, setPeoples] = useState(null);

  const apiURL = "https://swapi.dev/api/people/1/";

  const fetchData = async () => {
    const response = await axios.get(apiURL);

    setPeoples(response.data);
  };

  return (
    <div className="App">

      <h1>Game of Throne books</h1>
      <h2>Fetch a list from an API and display it</h2>

      {/* Запрос данных из API */}
      <div>
        <button className='fetch-button' onClick={fetchData}>
          Fetch Data
        </button>
        <br />
      </div>

      {/* Отобрадение данных из API */}
      <div className='peoples'>
        {peoples && peoples.map((people, index) => {
          const cleanedDate = new Date(people.released).toDateString();
          const names = people.name.join(', ');

          return (
            <div className='people' key={index}>
              <h3> People {index + 1}</h3>
              <h2>{people.name}</h2>
              <div className='details'>
                <p>: {names}</p>
                <p>: {people.gender} </p>
                <p>: {people.birth_year}</p>
                <p>: {cleanedDate}</p>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  );
}

export default App;

Answer 1

Дело в том, что запрос на https://swapi.dev/api/people/1/ - отдает 1 человека (с id = 1)

Вот такой запрос выдает уже 10 карточек с пагинацией https://swapi.dev/api/people (возьмем простой пример без пагинации)

Вот исправленный вариант

import React, { useState, useEffect, useCallback } from "react";
import styled from "styled-components";

const App = () => {
  const [peoples, setPeoples] = useState(null);

  const fetchData = useCallback(async () => {
    const response = await fetch("https://swapi.dev/api/people");
    const data = await response.json()

    setPeoples(data.results);
  }, []);

  return (
    <div className="App">
      <h1>Game of Throne books</h1>
      <h2>Fetch a list from an API and display it</h2>

      {/* Запрос данных из API */}
      <div>
        <button className="fetch-button" onClick={fetchData}>
          Fetch Data
        </button>
        <br />
      </div>

      {/* Отобрадение данных из API */}
      <div className="peoples">
        {peoples?.map((people, index) => {
          return (
            <div className="people" key={people.url}>
              <pre>{JSON.stringify(people)}</pre>
              <hr></hr>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const Button = styled.button`
  font-size: 2rem;
`;

export default App;

Так же советую не использовать в качестве ключа порядковый элемент в массиве key={index}, лучше заиспользовать что-то связанное с самим элементом, например, people.url

БЛОГ НА HUSL

Как создать карточку персонажа по SWAPI? React JS

Ответы (1 шт):