React Hooks重构GitHub用户搜索应用时出现map is not a function报错

核心报错原因 #

你调用的https://api.github.com/users/${userInput}是查询单个用户的接口，返回值是对象类型，你将对象赋值给初始为数组的data状态后，data就从数组变为对象，而对象本身没有map方法，所以触发报错。
之前类组件实现时你应该调用的是https://api.github.com/search/users?q=关键词的搜索接口，该接口返回的items字段是用户数组，所以可以正常调用map。

修复方案 #

场景1：你需要查询单个用户 #

直接删除map调用，判断data有值后直接传递给ListComponent即可，修改渲染部分代码：

{loading ? <div><h1>...Loading</h1></div> :
  (<div className='list-container'>
    {/* 加判断避免空数据渲染异常 */}
    {data.id && <ListComponent key={data.id} {...data}/>}
  </div>)
}

场景2：你需要模糊搜索匹配多个用户 #

更换请求接口，并取返回结果中的items数组赋值给data：

1. 修改handleSubmit内的请求逻辑：

const handleSubmit = () => {
  setLoading(true)
  // 替换为搜索多个用户的接口
  const searchUrl = `https://api.github.com/search/users?q=${userInput}`
  fetch(searchUrl)
  .then(res => res.json())
  .then((res) => {
    // 取返回的用户数组赋值，保证data一直是数组类型
    setData(res.items || [])
    setLoading(false)
  })
  // 加错误捕获避免接口异常导致状态错乱
  .catch(err => {
    console.error('请求失败', err)
    setData([])
    setLoading(false)
  })
}

2. 原渲染的map逻辑不需要改动。

额外优化建议 #

• 可以在调用map前增加数组类型判断，避免极端情况报错：{Array.isArray(data) && data.map(person => <ListComponent key={person.id} {...person}/>)}
• 建议将URL的拼接逻辑放在handleSubmit函数内部，避免状态更新不同步导致的请求地址错误。

内容的提问来源于stack exchange，提问作者rlpool06