时间戳

首页 > 解决方案 > 使用 React Hooks 获取数据 - 无法读取未定义的属性“地图”

javascript - 使用 React Hooks 获取数据 - 无法读取未定义的属性“地图”

问题描述

尝试使用 React Hooks 从 NHL API 获取数据。

链接到CodeSandbox。

当我在 return 语句中注释掉标签及其内容时，我的控制台日志确实成功获取了 API。但是，当标签的内容（.map 语句）说“无法读取未定义的属性 'map'”时，我在控制台中收到错误消息。

试图弄清楚为什么会显示此错误，以及为什么我无法映射从 API 定义的数据。

应用程序.JS

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

import "./styles.css";

function App() {
  const [data, setData] = useState({ people: [] });
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        "https://statsapi.web.nhl.com/api/v1/people/8475166?expand=person.stats&stats=yearByYear,careerRegularSeason&expand=stats.team&site=en_nhlCA"
      );
      setData(result.data.people);
      console.log(result.data.people);
    };
    fetchData();
  }, []);

  return (
    <ul>
      {data.people.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({ people: result.data.people });

您在状态变量中名为 people 的对象属性中设置数据。

推荐阅读