嵌套地图无法呈现主循环中的 <Text> 元素

Question

我有一个 "credits"

的嵌套数组

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

我想在 <Text> 元素中打印每个 "header"，然后在 <Text> 元素中打印每个 "credits"。

我已经查看了以下关于如何实现这一点的已经回答的问题，但一个是针对 ReactJS 并使用 HTML，另一个使用 React Native 仅输出视图的开始标记：

Cannot Render Nested Maps In ReactJS

我被告知存在语法错误，因为它在第一个 <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>
    );
  }

Answer 1

{
        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 元素。所以我把它们都放在一个 React.Fragment 中给你

嵌套地图无法呈现主循环中的 <Text> 元素

Nested map cannot render <Text> element from main loop

javascript

nested-loops

jsx

reactjs