React не будет отображать несколько извлеченных API в DOM - PullRequest
Новая
       4

React не будет отображать несколько извлеченных API в DOM

0 голосов
/ 07 февраля 2020

Ссылка на CodeSandbox .

Я могу успешно отобразить извлеченные данные Тавареса в DOM с помощью оператора .map. Однако, как только я пытаюсь загрузить данные о втором и третьем игроках точно таким же образом (они там, только что закомментированы прямо сейчас) - под Tavares '.map - я получаю ошибку "Cannot read property' map of of undefined и первый .map (Matthews) после Tavares.

Попытка выяснить, почему отображается эта ошибка, и почему я не могу сопоставить все три точки данных с DOM.

Приложение. JS

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

import "./styles.css";

function App() {
  // Set initial state for data
  const [data, setData] = useState({ tavares: [], matthews: [], marner: [] });

  // Fetch data
  useEffect(() => {
    const fetchData = async () => {
      // Grab all players API's
      let tavares =
        "https://statsapi.web.nhl.com/api/v1/people/8475166?expand=person.stats&stats=yearByYear,careerRegularSeason&expand=stats.team&site=en_nhlCA";
      let matthews =
        "https://statsapi.web.nhl.com/api/v1/people/8479318?expand=person.stats&stats=yearByYear,careerRegularSeason&expand=stats.team&site=en_nhlCA";
      let marner =
        "https://statsapi.web.nhl.com/api/v1/people/8478483?expand=person.stats&stats=yearByYear,careerRegularSeason&expand=stats.team&site=en_nhlCA";
      // Axios to get all api's
      axios
        .all([axios.get(tavares), axios.get(matthews), axios.get(marner)])
        .then(
          axios.spread((tavares, matthews, marner) => {
            setData(
              { tavares: [tavares.data.people[0]] },
              { matthews: [matthews.data.people[0]] },
              { marner: [marner.data.people[0]] }
            );
            console.log("Tavares:", tavares.data.people[0]);
            console.log("Matthews:", matthews.data.people[0]);
            console.log("Marner:", marner.data.people[0]);
          })
        );
    };
    fetchData();
  }, []);

  return (
    <>
      <h1>Tavares</h1>
      <ul>
        {data.tavares.map(item => (
          <li key={item.objectID}>
            <p>{item.id}</p>
            <p>{item.primaryNumber}</p>
          </li>
        ))}
      </ul>
      {/* <h1>Matthews</h1>
      <ul>
        {data.matthews.map(item => (
          <li key={item.objectID}>
            <p>{item.id}</p>
            <p>{item.primaryNumber}</p>
          </li>
        ))}
      </ul>
      <h1>Marner</h1>
      <ul>
        {data.marner.map(item => (
          <li key={item.objectID}>
            <p>{item.id}</p>
            <p>{item.primaryNumber}</p>
          </li>
        ))}
      </ul> */}
    </>
  );
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

1 Ответ

1 голос
/ 07 февраля 2020

Вы звоните setData с тремя аргументами (три объекта по одному игроку в каждом), а не со всеми игроками. Это означает, что только первый объект с tavares устанавливается как data (попробуйте зарегистрировать свой data объект перед рендерингом, чтобы увидеть).

Вы выполняете: 

        setData(
          { tavares: [tavares.data.people[0]] },
          { matthews: [matthews.data.people[0]] },
          { marner: [marner.data.people[0]] }
        );

Когда вы должны делать: 

        setData({
          tavares: [tavares.data.people[0],
          matthews: [matthews.data.people[0]],
          marner: [marner.data.people[0]]
        });
...