javascript - React TypeError : teams.映射不是函数

Question

我在尝试从 api 获取和绘制元素时收到 TypeError:teams.map is not a function。我还没能找到错误。

我正在尝试构建一个简单的应用程序，其中包含英超球队及其详细信息。我还在写，因为堆栈溢出不允许我发布我的问题

leagueTeams 组件

import React, { useState } from 'react';

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

  const [teams, setTeams] = useState(null)

  fetch(url)
    .then(res => res.json())
    .then(data => setTeams(data))

  return (
    <div className="teams">
    {teams && teams.map((team, index)=>(
      <div className="team" key={index}>
        <h3>{team.strTeam}</h3>
      </div>)
    

       
    )}</div>
  )
}

export default LeagueTeams

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

App.js

import React from 'react';
import './App.css';
import LeagueTeams from './components/leagueTeams'

function App() {

  
return(
  <>
  <h1 className="title">Premier League Teams!</h1>
  
  <LeagueTeams />
  </>
)
  }

  
export default App;

Answer 1

错误消息是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);

在此处工作 CodeSandbox https://codesandbox.io/s/recursing-jepsen-odc65