文本字符串必須在<text>零件，</text>

Question

我有以下代碼，其中我在 map 中使用了一個特色組件，並且 map 的值在特色數組中給出。

import * as React from 'react';
import { StyleSheet, TextInput, Image, Button, Pressable } from 'react-native';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import Featured from '../components/Featured';

export default function TabOneScreen({navigation}) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Discover Music to Own</Text>
      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
          <TextInput style={styles.searchbar}
      placeholder="Search Music to Own"/>
          {featured.map((feat) =>
              {return (<Featured
                       artistName= {feat.artistName}
                       mediaName= {feat.mediaName}
                       uri= {feat.uri}
                  />
)}
              )}     </View>
  );
}


const featured = [{uri:"https://i.guim.co.uk/img/media/68659a5732b6a11833ad642325c94276e73bfd17/1518_282_1533_920/master/1533.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=55a7cd37c94dacf41f82d43e83352818",
                   artistName:"Beyonce",
                   mediaName:"Good Album Name"}]

但是，我收到以下錯誤：

Text strings must be rendered within a <Text> component.

如何修復此錯誤？

Answer 1

錯誤很可能取決於您從Themed使用的<Text> ，否則我已將密鑰添加到 map 並格式化代碼。

import * as React from 'react';
import { StyleSheet, TextInput, Image, Button, Pressable } from 'react-native';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import Featured from '../components/Featured';

export default function TabOneScreen({ navigation }) {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>Discover Music to Own</Text>
            <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
            <TextInput 
                style={styles.searchbar}
                placeholder="Search Music to Own" 
            />
            {
                featured.map((feat, index) => {
                    return (
                        <Featured
                            artistName={feat.artistName}
                            mediaName={feat.mediaName}
                            uri={feat.uri}
                            key={index}
                        />
                    )
                })
            }
        </View>
    )
}

const featured = [{
    uri: "https://i.guim.co.uk/img/media/68659a5732b6a11833ad642325c94276e73bfd17/1518_282_1533_920/master/1533.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=55a7cd37c94dacf41f82d43e83352818",
    artistName: "Beyonce",
    mediaName: "Good Album Name"
}]

Answer 2

只需像在div中一樣包裝

<div>
   {featured.map((feat) =>
       {return (<Featured
            artistName= {feat.artistName}
            mediaName= {feat.mediaName}
            uri= {feat.uri}
         />
       )}
   )}
</div>