时间戳

首页 > 解决方案 > React 不会将多个获取的 API 渲染到 DOM

javascript - React 不会将多个获取的 API 渲染到 DOM

问题描述

链接到CodeSandbox。

我可以通过 .map 语句成功地将 Tavares 获取的数据显示到 DOM。但是，一旦我尝试使用完全相同的方式加载第二个和第三个玩家数据（他们在那里，只是现在被注释掉了）——在 Tavares 的 .map 下——我得到一个错误，“无法读取属性” map' of undefined"，以及 Tavares' 之后的第一个 .map (Matthews)。

试图弄清楚为什么会显示此错误，以及为什么我不能将所有三个数据点都映射到 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);

标签： javascriptreactjsasync-awaitaxiosreact-hooks

解决方案

您正在调用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]]
        });

推荐阅读