Блог

Ниже react-native приведен код, который я использую для отображения текста элементов массива map .

 import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import {Card} from 'react-native-elements';
import {View, Text} from 'react-native';


class Contact extends React.Component{
    constructor(props){
        super(props);
        this.state={
            arr:["Vipul","Satish","Manisha","Jonty"]
        }
    }
    render(){
        return(
            <Card>
                <Card.Title>Contact Information</Card.Title>
                <Card.Divider />
                <View>
                    {
                        this.state.arr.map(function(elem){
                            console.log(elem)
                            return(
                                <Text>Hello {elem}</Text>
                            );
                        })
                    }
                </View>
            </Card>
        );
    }
}

export default Contact;
  

У меня уже есть настройка массива с состоянием в конструкторе моего класса. Сначала я использовал функцию arrow для возврата <Text> . Но это не сработало. Теперь обычная функция тоже не работает.
Я получаю сообщение об ошибке ниже:

 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
  

Однако, если я заменю свою функцию рендеринга на это:

 render(){
   return(<View><Text>Hello world</Text></View>);
}

  

тогда все работает нормально, и я получаю Hello world на экране. Кроме того, console.log в приведенном выше коде корректно печатаются все элементы массива, но просто элементы не отображаются.

Я проверил другие темы, похожие на эту, но не смог получить никакой помощи.

Спасибо! Состояние таково:

 constructor(props){
        super(props);
        this.state={
            arr:["Vipul","Satish","Manisha","Jonty"]
        }
    }
  

Редактировать:
Это то, что было указано на их официальном сайте:

 <Card>
  <Card.Title>CARD WITH DIVIDER</Card.Title>
  <Card.Divider/>
  {
    users.map((u, i) => {
      return (
        <View key={i} style={styles.user}>
          <Image
            style={styles.image}
            resizeMode="cover"
            source={{ uri: u.avatar }}
          />
          <Text style={styles.name}>{u.name}</Text>
        </View>
      );
    })
  }
</Card>
  

Вы можете видеть, что мой код похож на этот, поэтому он должен работать именно так.

не уверен, для какой библиотеки вы используете Card , но в качестве дочернего элемента может потребоваться title prop, а не строка.