使用 React 钩子获取数据 - 无法读取未定义的属性'map'

Question

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

链接到代码沙盒。

当我注释掉标签及其在 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);

Answer 1

我想应该是

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

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

Answer 2

问题出在setData(result.data.people)！

您提供的初始状态与设置数据的方式完全不同。

初始状态：data = {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>
))}

或者，您可以在获取结果后更改分配方式。

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

我个人倾向于第一种解决方案，因为我认为没有任何理由将数据作为对象。或者我可以简单地称它为"人" 😉