React Pass реквизит для детей с PokeApi - PullRequest
Новая
       21

React Pass реквизит для детей с PokeApi

1 голос
/ 06 апреля 2020

Я создаю небольшое приложение React с PokeApi . Итак, я хочу создать приложение Pokedex. Моя проблема в том, что pokemon.name не отображается на экране. Я покажу тебе. Итак, когда я нажал на pokeCard, в SelectedPokemon реквизиты сохранили идентификатор нажатой pokeCard. Но я не знаю, почему, когда я делаю выборку и передаю реквизиты покемонов, в детских реквизитах я вижу только массив страниц покемонов вместо pokemon.name.

pokedex index

.

Его код родительского компонента. Я думаю, что проблема может быть в получении.

Родительский компонент 

function About(props) {
  let { SelectedPokemon } = props;
  const [Pokemon, setPokemon] = useState([]);
  const [Loading, setLoading] = useState(true);

  useEffect(() => {
    let endpointForPokemonDetails = `${API_URL}${SelectedPokemon}`;
    fetchPokemonDetails(endpointForPokemonDetails);
  });

  const fetchPokemonDetails = (endpointForPokemonDetails) => {
    fetch(endpointForPokemonDetails)
      .then((result) => result.json())
      .then((result) => {
        setPokemon([...Pokemon, result]);
      }, setLoading(false))
      .catch((error) => console.log("Error:", error));
  };

  return (
    <div
      style={{
        position: "fixed",
        top: 150,
        right: 150,
      }}
    >
      <PokemonDetails pokemon={Pokemon} />
    </div>
  );
}

Его Дочерний компонент : 

function PokemonDetails(props) {
  let { pokemon } = props;
  return (
    <div style={{ border: "1px solid #333", height: "300px", width: "250px" }}>
      {pokemon.name}
    </div>
  );
}

1 Ответ

0 голосов
/ 06 апреля 2020

Я решил свою проблему.

Мой Pokemon является массивом. Так что я oop над ним. 

{pokemon.map((pokemon) => ( <div key={pokemon.id}>{pokemon.name}</div> ))}

Когда я установил setPokemon([...Pokemon, result]), значит реализация как новая коллекция. Я установил setPokemon([...Pokemon, result]) и все работает.

...