Как я могу переопределить пагинацию API по умолчанию и представить все результаты в экземпляре

Question

Я пытаюсь создать приложение, используя REST API «Rick and Morty», в документации API я могу отображать только 20 символов одновременно, но я хочу отобразить все символы (более 490 символов, доступных в API)на одной странице без нумерации страниц. Каков наилучший способ сделать это?

Ссылка API: "https://rickandmortyapi.com/documentation"

Согласно документации, у меня есть доступ только к 20 символам одновременно на каждой странице (ЕстьВсего 20 страниц), затем мне нужно отозвать URL-запрос, такой как "https://rickandmortyapi.com/api/character/?page=18"

. Прямо сейчас я создал свой компонент" Card.js ", как показано ниже:

import React from "react";

class Card extends React.Component {
  state = {
    id: "",
    name: "",
    status: "",
    species: "",
    type: "",
    gender: "",
    imgURL: ""
  };

  componentDidMount() {
    const id = this.props.id;
    const name = this.props.name;
    const status = this.props.status;
    const species = this.props.species;
    const gender = this.props.gender;
    const type = this.props.type;
    const imgURL = `https://rickandmortyapi.com/api/character/avatar/${id}.jpeg`;
    console.log(this.props);

    this.setState({
      id: id,
      name: name,
      status: status,
      species: species,
      gender: gender,
      type: type,
      imgURL: imgURL
    });
  }

  render() {
    return (
      <div>
        <h1>ID: {this.state.id}</h1>
        <img src={this.state.imgURL} alt="Image failed to load" />
        <h1>NAME: {this.state.name}</h1>
        <h2>STATUS: {this.state.status}</h2>
        <h3>SPECIES: {this.state.species}</h3>
        <h3>GENDER: {this.state.props}</h3>
        <h4>TYPE: {this.state.type}</h4>
      </div>
    );
  }
}

export default Card;

И я сопоставляю отдельные карты, используя другой компонент "CardList.js", как показано ниже:

import React from "react";
import axios from "axios";
import Card from "./Card";

class CardList extends React.Component {
  state = {
    url: "https://rickandmortyapi.com/api/character/?page=5",
    character: []
  };

  async componentDidMount() {
    const res = await axios.get(this.state.url);
    this.setState({
      character: res.data.results
    });
  }

  render() {
    return (
      <div>
        {this.state.character.map(character => (
          <Card
            key={character.id}
            id={character.id}
            name={character.name}
            status={character.status}
            species={character.species}
            gender={character.gender}
            type={character.type ? character.type : "Unknown"}
          />
        ))}
      </div>
    );
  }
}

export default CardList;

Как вы можете видеть, я жестко закодировал URL-запрос для "page = 5", но я хочувизуализировать имена персонажей для всех страниц. Как мне поступить?