React、Axios、PokeAPI：未定义的阅读地图答案

【问题标题】：React, Axios, PokeAPI: undefined reading MapReact、Axios、PokeAPI：未定义的阅读地图
【发布时间】：2022-01-04 15:50:39
【问题描述】：

为了提高我的 React 技能，我关注了 this tutorial 以了解如何使用 PokeAPI 创建名称列表。

我停在11.35，因为我把这段代码作为教程展示（第一个块来自App.js，第二个来自一个名为PokemonList.js的组件）：

function App() {
  const [pokemon, setPokemon] = useState([])

  useEffect(()=>{

    axios.get("https://pokeapi.co/api/v2/pokemon").then(res=> {
      setPokemon(res.data.result.map(p => p.name))
    })
  }, [])
  
   return (
    <PokemonList pokemon={pokemon}/>
  );
}

export default App;

export default function PokemonList({pokemon}){
    return (
        <div>
            {pokemon.map(p => (
                <div key={p}>{p}</div>
            ))}
        </div>
    )
}

但在控制台我有错误消息：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')

我知道我需要在 App.js 中放置一个 Promise.all（我之前发现了一个类似的问题），但我不清楚我必须如何更改 PokemonList 组件才能在屏幕上打印列表。

【问题讨论】：

哪个地图未定义？你检查过 res.data 实际上是什么吗？
考虑在编译时使用 TypeScript 来帮助查找此类错误。
我已经解决了！这只是一个错字

标签： javascript html reactjs pokeapi

【解决方案1】：

有错别字。您必须从 result 更改为 results。

【讨论】：

令人难以置信的是，有时错误如此简单！
请不要回答解决方案是“修复错字”的问题。这种类型的问题没有长期价值，因为其他有相同问题的人不会通过搜索找到这个问题。 “错字”是标准的关闭投票原因之一。回答此类问题可以阻止 OP 删除它以从 StackOverflow 中删除膨胀。您可以删除此答案以消除阻止此类清理的可能性。