React Native调用D&D怪物API后FlatList显示为空的问题

问题根源 #

你调用的D&D怪物API和users API返回的数据结构存在差异：

• users API直接返回数组格式的数据，完全匹配FlatList对data属性的要求
• 怪物API返回的是一个包含results字段的对象，你直接将整个对象赋值给monsters，导致FlatList无法识别有效列表数据

修复代码 #

修改fetchMonsters函数中的赋值逻辑，提取对象内的results数组：

const fetchMonsters = async () => {
  const response = await fetch('https://www.dnd5eapi.co/api/monsters')
  const data = await response.json()
  // 提取真正的怪物列表数组赋值给monsters
  setMonsters(data.results)
  setLoading(false)
}

验证建议 #

可以在代码中打印API返回的完整结构，确认数据格式：

console.log("API返回完整结构", data)

你会看到返回内容是类似{ count: 334, results: [...] }的结构，其中results才是需要渲染的怪物列表数组。

内容的提问来源于stack exchange，提问作者Juan Bautista Bourguignon