Блог

У меня есть следующий код, в котором я использую компонент Featured внутри карты, а значения карты приведены в featured array .

 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=1200amp;height=900amp;quality=85amp;auto=formatamp;fit=cropamp;s=55a7cd37c94dacf41f82d43e83352818",
                   artistName:"Beyonce",
                   mediaName:"Good Album Name"}]


 

Однако я получаю сообщение об ошибке, которое:

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

Как исправить эту ошибку?

Ошибка, скорее всего, зависит от <Text> того, что вы используете из Themed , в противном случае я добавил ключ к карте и отформатировал код.

 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=1200amp;height=900amp;quality=85amp;auto=formatamp;fit=cropamp;s=55a7cd37c94dacf41f82d43e83352818",
    artistName: "Beyonce",
    mediaName: "Good Album Name"
}]
 

Просто оберните внутри div , как в

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