Доступ и отображение вложенного массива на экране React Native - PullRequest
Новая
       10

Доступ и отображение вложенного массива на экране React Native

0 голосов
/ 27 августа 2018

У меня есть массив 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" }
    ]      
  }
];

Я хочу очень просто отобразить элементы в этом формате(команды указаны под полным именем):

Джон Доу

Орлы

Рыцари

Джейн Доу

Пилоты

Гром

Я попробовал следующее в 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, а не их команд. Что я могу сделать, чтобы добиться правильного результата?

1 Ответ

0 голосов
/ 27 августа 2018

Это потому, что вы возвращаете предмет с именем и фамилией, прежде чем ваш код сможет вернуть какие-либо данные команды: 

<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>
...