Как мне смешивать состояния и реквизиты?

Question

Я пытаюсь создать приложение, используя "Rick and Morty API"

Что я пытаюсь сделать:

1) отображать имена персонажей на веб-странице, используя REST API

2) каким-то образом мне удалось это сделать, но я так запутался.

3) У меня есть два компонента, один - «card.js», который создает карту, а другой - «cardlist.js». "который зацикливается на компоненте card.js для визуализации всех имен с использованием функции карты.

Компонент My 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=20",
    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;

ПРИМЕЧАНИЕ: - Почему-то приложение полностью работает.

Проблемы, с которыми я сталкиваюсь, и почему это так запутанно:

1) Не понять, как моиВ списке карт отображаются данные типа «id = {character.id}», поскольку он не содержит реквизитов.

2) почему у меня есть доступ к реквизитам в моем компоненте «card.js». когда я пытаюсь console.log (реквизит);в моем компоненте card.js я получаю все результаты JSON, и это просто шокирует меня. как получить доступ к результату JSON в свойстве props в компоненте MY CARD.JS и как он связан с компонентом cardlist.js.

3) Я не написал ни одного реквизита ни в возврате картыили компонент списка карт, так как он соединяется друг с другом.

Answer 1

1) Эти данные находятся в вашем штате :) Нет необходимости передавать реквизит, поскольку вы выполняете рендеринг на основе данных о состоянии

2,3) вы можете получить доступ к реквизиту на карте JS, потому что выпередать данные здесь:

<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"}
          />