Javascript 使用React挂钩获取数据-无法读取未定义的属性“map”

尝试使用React钩子从nhlapi获取数据

链接到

当我在return语句中注释掉标记及其内容时，我的控制台日志确实成功地获取了API。但是，当标记的内容出现在.map语句中时，控制台中出现了一个错误，表示无法读取未定义的属性“map”

试图找出显示此错误的原因，以及无法映射从API定义的数据的原因

App.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);

我想应该是这样

setData({ people: result.data.people });

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

我想应该是这样的

setData({ people: result.data.people });

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

问题在于setDataresult.data.people

您提供的初始状态与设置数据的方式大不相同

初始状态：数据={people:[]} 现在你可以像这样映射：data.people

在用效果：data=result.data.people

所以解决方案是要么改变初始状态，然后改变循环方式

const [data, setData] = useState([]);  // Line #8

setData(result.data.people);  // Line # 14
                              // Line # 22
{data.map(item => (    
 <li key={item.objectID}>
   <p>{item.id}</p>
   <p>{item.primaryNumber}</p>
 </li>
))}

我个人倾向于第一种解决方案，因为我不认为有任何理由让数据成为对象。或者我可以简单地称之为people问题在于setDataresult.data.people

您提供的初始状态与设置数据的方式大不相同

初始状态：数据={people:[]} 现在你可以像这样映射：data.people

在用效果：data=result.data.people

所以解决方案是要么改变初始状态，然后改变循环方式

const [data, setData] = useState([]);  // Line #8

setData(result.data.people);  // Line # 14
                              // Line # 22
{data.map(item => (    
 <li key={item.objectID}>
   <p>{item.id}</p>
   <p>{item.primaryNumber}</p>
 </li>
))}

---

我个人倾向于第一种解决方案，因为我不认为有任何理由让数据成为对象。或者我可以简单地称之为“人多”！非常感谢！啊！非常感谢！