React Native拉取JSON数据时报data.map is not a function错误

data.map is not a function 报错本质是类型不匹配：

• .map() 是JS数组的原生遍历方法，只有数组类型可以直接调用
• 你写代码时给data设置的初始值是空数组，用测试接口时接口返回的是对象数组，赋值后data是数组，.map()能正常运行
• 当前你调用的业务接口返回值不是数组，是单个文章对象，你把整个对象直接赋值给data后，对象类型不存在.map()方法，调用就直接报错。
  你贴的接口返回JSON最外层是{}包裹的单对象，不是[]包裹的数组，和测试接口的返回结构完全不一样，这就是为什么测试接口能跑、当前接口报错的根本原因。

根据你的实际业务需求二选一即可： #

方案1：接口本身只需要返回单条数据，不需要渲染列表 #

这种场景不需要用.map()遍历，直接渲染对象属性就行，修改两处代码：

1. 调整state初始值，和单对象返回结构匹配，顺便把不符合React命名惯例的state更新函数名改对：

// 原代码是 const [data, getData] = useState([])
const [data, setData] = useState({})

2. 把fetch方法里的getData(response)改成setData(response)，再删掉原来的data.map(...)遍历块，直接渲染单条数据：

<DataTable.Row style={styles.tableRow}>
  <DataTable.Cell> {data.author || '-'} </DataTable.Cell>
  <DataTable.Cell> {data.title || '-'} </DataTable.Cell>
  <DataTable.Cell> {data.price || '-'} </DataTable.Cell>
</DataTable.Row>

代码里加的|| '-'是兜底处理，避免数据没加载完成时页面渲染空白或者报错。 #

方案2：业务需要渲染列表，当前接口返回单条属于结构不符合预期 #

这种场景你在赋值时把返回的单条对象包装成数组即可，为了避免后续接口返回异常再出同类报错，最好加一层类型判断兜底：
修改fetch里的赋值逻辑：

.then((response) => {
  console.log(response);
  // 类型兼容：返回是数组直接用，单对象就包成数组，空值就给空数组，保证data始终是数组
  const formatData = Array.isArray(response) 
    ? response 
    : response 
      ? [response] 
      : [];
  setData(formatData);
})

加完这层判断后，不管接口返回数组、单对象还是空值，data永远是数组类型，不会再触发.map is not a function报错。

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