React Native嵌套数组图片访问：嵌套map方法报错求助

问题描述 #

在React Native项目中尝试访问两层数组中的图片数据，数据已成功打印，但嵌套使用map方法渲染时出现错误。相关代码及返回数据结构如下：

错误分析 #

1. 图片路径访问错误：嵌套map中错误使用img.images.url，根据返回的JSON结构，每个图片对象本身直接包含url属性，应改为img.url。
2. 冗余且错误的状态维护：单独维护images状态完全没必要，且代码中只将第一个艺术家的图片数组赋值给images，导致所有艺术家都显示同一张图，正确做法是直接使用当前遍历的艺术家对象的images数组。
3. 服务文件的Token混淆问题：服务文件中token变量同时被用作查询参数和Bearer令牌，这会导致Spotify API请求失败，应该使用路由传递过来的有效令牌。
4. 缺少空值安全处理：虽然初始状态是空数组，但为了避免数据加载过程中或某个艺术家无图片时出现崩溃，建议添加空值判断。

修复后的代码 #

组件代码 #

import { StyleSheet, Text, View, Image, Dimensions } from 'react-native'
import React, { useEffect, useState } from 'react'
import { useNavigation, useRoute } from "@react-navigation/native";
import { Artistfu } from '../services.js/services';

const ArtistSearch = () => {
  const route = useRoute()
  const token = route.params.token
  const navigation = useNavigation();

  const [artistt, setArtistt] = useState([]);
  const [error, setError] = useState('');

  useEffect(() => {
    Artistfu(token).then(artists => {
      setArtistt(artists)
    }).catch(err => {
      setError(err);
    });
  }, [token]);

  return (
    <View>
      {artistt.map((ar, i) => (
        <View key={i} style={{ marginVertical: 10, paddingHorizontal: 20 }}>
          <Text>粉丝数：{ar.followers.total}</Text>
          {/* 空值安全处理，确保images存在再遍历 */}
          {ar.images?.map((img, idx) => (
            <Image 
              key={idx}
              source={{ uri: img.url }} 
              style={{ 
                height: 210, 
                width: Dimensions.get('window').width - 40, 
                resizeMode: 'cover',
                marginVertical: 5
              }} 
            />
          ))}
          <Text>艺术家：{ar.name}</Text>
          <Text>热度：{ar.popularity}</Text>
        </View>
      ))}
      {error && <Text>加载出错：{error.message}</Text>}
    </View>
  )
}

export default ArtistSearch

const styles = StyleSheet.create({})

服务文件代码 #

import axios from 'axios';
const apiUrl = 'https://api.spotify.com'
// 单独定义查询参数，避免和Token混淆
const searchParams = 'query=remaster%2520track%3ADoxy%2520artist%3AMiles%2520Davis&type=artist&market=ES&locale=en-US%2Cen%3Bq%3D0.9&offset=5&limit=10'

export const Artistfu = async (token) => {
    const resp = await axios.get(`${apiUrl}/v1/search?${searchParams}`, {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: "Bearer " + token,
      },
    })
    return resp.data.artists.items
};

额外说明 #

• 使用ar.images?.map的可选链操作符，确保当ar.images为undefined或null时不会触发错误。
• 为每个图片元素添加独立的key（使用索引idx），符合React列表渲染的要求。
• 服务文件中将查询参数和Token分离，避免变量名混淆导致的请求失败。
• 在组件中添加了错误提示，方便调试。

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