React Native map遍历渲染单条数据时返回undefined问题排查

核心错误出在数据拉取后的处理逻辑：

1. 你调用JSON.stringify(res.data)把原本axios自动解析好的JS对象/数组转成了JSON字符串，字符串类型的值不存在id、username属性，访问自然返回undefined。你控制台看到的{"id":1,"username":"test_user"}是字符串的打印结果，不是可直接访问属性的JS对象。
2. 额外用[Data]把字符串包成数组，进一步导致遍历拿到的每个元素都是字符串类型。
3. 现有代码还存在两个语法/规范问题：async/await和.then链式调用混写增加逻辑出错概率；列表map返回的多个同级Text标签没有外层容器，且未给列表项设置唯一key属性，会触发React语法报错和性能警告。

修正数据拉取逻辑 #

去掉多余的JSON字符串转换，不要额外给返回数据套数组，统一使用async/await写法即可：

const getData = async () => {
  try{
    const res = await axios.get('http://url')
    // 注意：如果接口返回结构是res.data.xxx才是列表数据，替换成对应字段即可
    setData(res.data);
  } catch (error) {
    console.error(error);
  }
};

修正渲染逻辑 #

给map返回的多个同级元素增加外层容器，补充列表项唯一key：

const renderData = () => {
  return(
    <View>
      { data?.map((item) => (
        <View key={item.id}>
          <Text style={{ alignSelf: 'center', fontSize: 12 }}>@{item.id}</Text>
          <Text style={{ alignSelf: 'center', fontSize: 12 }}>@{item.username}</Text>
        </View>
      ))}
    </View>
  )
}

修复后可在map回调中执行console.log(typeof item)，输出值为object即代表数据类型正确，此时访问item.id、item.username就能拿到对应字段值。

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