无法读取useState值上未定义的属性“映射”
无法读取useState值上未定义的属性“映射”
提问于 2021-03-18 05:15:28
我是新的反应，我不断地收到这个错误，在谷歌之后我找不到为什么useState值不能被读取为数组的原因:( .这是我得到的错误：'TypeError: team.map不是一个函数‘
import React, { useEffect, useState } from "react";
const SportTeams = () => {
const [team, setTeam] = useState([]);
useEffect(() => {
const getSports = async () => {
const response = await fetch("https://www.thesportsdb.com/api/v1/json/1/all_sports.php");
const data = await response.json();
setTeam(data);
console.log(data);
}
getSports();
}, []);
return (
<div className="myClass">
<ul>
{team.map((sport, index) => {
return <li key={`${sport.strSport}-${index}`}>{sport.strSport}</li>
})}
</ul>
</div>
);
};
export default SportTeams;回答 3
Stack Overflow用户
发布于 2021-03-18 05:27:35
只需像下面这样更新setTeam，您的错误就会得到解决。
setTeam(data.sports);
Stack Overflow用户
发布于 2021-03-18 05:26:50
这是因为您使用数据设置team状态，而不检查它是否未定义。如果数据是未定义的，那么您的州团队也会变得没有定义。所以一定要检查数据。
import React, { useEffect, useState } from "react";
const SportTeams = () => {
const [team, setTeam] = useState([]);
useEffect(() => {
const getSports = async () => {
const response = await fetch("https://www.thesportsdb.com/api/v1/json/1/all_sports.php");
if (response) {
const data = await response.json();
if (data) {
setTeam(data);
}
}
console.log(data);
}
getSports();
}, []);
return (
<div className="myClass">
<ul>
{team.map((sport, index) => {
return <li key={`${sport.strSport}-${index}`}>{sport.strSport}</li>
})}
</ul>
</div>
);
};
export default SportTeams;也有可能您的响应不是您所期望的，而实际的数据可能在您的响应中。在这种情况下，您需要先检查您的响应，然后继续设置数据。
Stack Overflow用户
发布于 2021-03-18 05:30:37
就像我在评论中说的。您要为团队设置的值不是数组。
const data = await response.json();
setTeam(data.sports);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66685170
复制相关文章
相似问题
腾讯云开发者
