Question

我有一个Athletes对象的数组，其中包含另一个特定运动员曾参加过的teams对象的数组：

  var athletes = [
  {
    "athlete_id": 123,
    "first_name": "john",
    "last_name": "doe",
    "teams": [
      { "team_id": 4,"team_name": "Eagles" },
      { "team_id": 7, "team_name": "Knights" }
    ]
  },
  {
    "athlete_id": 276,
    "first_name": "jane",
    "last_name": "doe",
    "teams": [
      { "team_id": 4,"team_name": "Pilots" },
      { "team_id": 7, "team_name": "Thunder" }
    ]      
  }
];

我想非常简单地以这种格式渲染项目（团队以全名列出）：

John Doe

鹰

骑士

简·多伊

飞行员

雷声

我已经在render()方法中尝试了以下方法：

<View>
        { athletes.map((item, key) => {
          return <Text key={key}>{item.first_name} + " " + {item.last_name}</Text>
            { item.teams.map((unit, key2) => {
              return <Text key={key2}>{unit.team_name}</Text>
            })}

        })} 
</View>

使用上面的代码段，我只能呈现athletes而不是其团队的全名。我该怎么做才能获得正确的输出？

Answer 1

这是因为在代码有机会返回任何团队数据之前，您将返回带有名字，姓氏的项目：

<View>
    { athletes.map((item, key) => {
      return (
        <View key={key}>
            <Text>{item.first_name} {item.last_name}</Text>
            { item.teams.map((unit, key2) => {
              return <Text key={key2}>{unit.team_name}</Text>
            })}
        </View>
      );
    })} 
</View>

在屏幕上访问和显示嵌套数组React Native

1 个答案: