Вложенная карта не может отобразить элемент <Text>из основного цикла - PullRequest
Новая
       6

Вложенная карта не может отобразить элемент <Text>из основного цикла

1 голос
/ 14 января 2020

У меня есть вложенный массив «кредитов» 

const credits = [
  {
    id: 1,
    heading: 'Test Organisation',
    credits: [
      {id: 1, text: 'Joe Bloggs'},
      {id: 2, text: 'Jane Bloggs'},
    ]
  },
....
];

Я хочу напечатать каждый «заголовок» в элементе <Text>, а затем каждый из их «кредитов» в <Text> element.

Я рассмотрел следующие уже отвеченные вопросы о том, как этого добиться, но один предназначен для ReactJS и использует HTML, а другой, который использует React Native, выводит только открывающий тег ракурс:

Мне говорят, что есть синтаксическая ошибка, так как она ожидает закрывающие скобки после конца первого <Text> элемента.

Вот что у меня есть: 

render() {
    return (
        <ScrollView style={styles.container}>
          <View style={styles.centredHighlightHeaderWrapper}>
            <Text style={styles.centredHighlightHeader}>
              Credits
            </Text>
          </View>


          {
            credits.map(item => (
                  <Text style={styles.centredHeader}>{item.heading}</Text>#Unexpected token -- js error says expecting "," - phpstorm says expecting ")"

              {
                item.credits.map(credit => (
                    <Text style={styles.name}>{credit.text}</Text>
                ))
              }
            ))
          }

        </ScrollView>
    );
  }

1 Ответ

2 голосов
/ 14 января 2020 
{
        credits.map(item => (
             <React.Fragment>
               <Text style={styles.centredHeader}>{item.heading}</Text>

               {
                item.credits.map(credit => (
                    <Text style={styles.name}>{credit.text}</Text>
                ))
                }
             </React.Fragment>
        ))
      }

Вы не можете иметь смежные реактивные элементы без контейнера. Поэтому я поместил их обоих в React.Fragment для вас

...