React Native调用fetch接口报错res.map is not a function如何解决？

• getDepartments 方法的 Promise 链未向下传递返回值：最后一个 .then(data=>console.log(data)) 中仅执行了打印操作，console.log 本身返回值为 undefined，导致整个 getDepartments 函数返回的 Promise 最终 resolve 的值是 undefined，因此后续拿到的 res 为空，调用 map 方法必然抛出类型错误。
• 状态更新逻辑违反 React 规范：直接对 useState 返回的 department 数组执行 push 操作属于直接修改原生状态，React 无法感知状态变更，即使拿到数据也不会触发视图重渲染。
• 请求头存在隐藏问题：Authorization 头中 Bearer 和 token 之间缺少空格，不符合 JWT 鉴权规范，部分服务端会直接拒绝鉴权，当前能拿到数据大概率是服务端做了兼容处理，建议修正。

1. 调整 getDepartments 方法，打印数据后将接口返回的 data 主动 return，保证 Promise 链可以拿到接口数据：

const getDepartments=()=>{  
  const url = /*my api's url here*/
  return fetch(url, {
    method: 'GET',
    headers: { 
      "Authorization": "Bearer " + token , // 补上Bearer后的空格
      'Accept': 'application/json',
      'Content-Type':'application/json'
    }
  })
  .then(response => response.json())
  .then(data=>{
    console.log(data)
    return data // 新增return向下传递数据
  }) 
  .catch(error => console.error(error))
}

2. 重写 getdepartment 方法，使用 setDepartment 更新状态，同时添加空值判断避免接口返回非数组时报错，不建议混用 async/await 和 .then 写法，简化后逻辑更清晰：

const getdepartment = async () => {
  const res = await getDepartments()
  // 先判断res是否为数组再做处理
  if(Array.isArray(res)){
    const formatData = res.map(p => ({
      name: p.name,
      id: p.id
    }))
    setDepartment(formatData) // 用setDepartment更新状态
  }
}

3. 调整渲染逻辑，department 数组中存储的是对象，不能直接渲染对象本身，需要取对应属性展示，同时添加空值判断避免数组为空时报错：

return (
  <View>
    <Text>
      {department[0]?.name || '加载中'}
    </Text>
  </View>
)

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