Javascript 反应类型错误：teams.map不是函数

我发现TypeError:teams.map不是从api获取和绘制元素时的函数。我没能找到错误

我正试图建立一个简单的应用程序与英超球队和他们的细节。我还在写，因为堆栈溢出不允许我发布我的问题

联盟团队组成部分

import React，{useState}来自“React”；
职能联盟团队（）{
常量url=https://www.thesportsdb.com/api/v1/json/1/search_all_teams.php?l=English%20Premier%20League'
const[teams，setTeams]=useState（null）
获取（url）
.then（res=>res.json（））
.然后（数据=>SETTAMS（数据））
返回(
{teams&&teams.map（（team，index）=>(
{team.strTeam}
)
)}
)
}
导出默认联盟球队

---

因为

团队

将成为数组，写入状态为

const [teams, setTeams] = useState([])

然后像这样编写useffect（）函数

    useEffect(()=>{
 fetch(url)
    .then(res => res.json())
    .then(data => setTeams(data))
},[])   

这将在安装组件时获取数据

在map函数中，将其写成

{teams.length && teams.map((team, index)

---

希望它能工作

错误消息是

teams.map不是函数

，这是因为teams实际上不是数组：

const url = 'https://www.thesportsdb.com/api/v1/json/1/search_all_teams.php?l=English%20Premier%20League'

这不会返回数组，而是返回一个对象：

{"teams":[{"idTeam":"133604","idSoccerXML":"9","idAPIfootball":"42","i....

这意味着您应该通过以下方式更新状态：

setTeams(data.teams);

---

这里的工作代码沙盒

您确定

团队

是一个数组（来自第二承诺的数据）？您应该将初始值设置为

[]

而不是

null

您应该将fetch（）命令放置在useffect挂钩中。

长度和
已过时。如果数组为空，映射也不会返回任何映射值。@F.P yeah[]在javascript中为false，我们不需要检查长度