Нарушение инварианта: Нарушение инварианта: текстовые строки должны отображаться в компоненте <Text> - PullRequest
Новая
       10

Нарушение инварианта: Нарушение инварианта: текстовые строки должны отображаться в компоненте <Text>

0 голосов
/ 07 февраля 2019

создание приложения в реактивном режиме, работающее с этой проблемой.в основном я должен создать страницу, которая печатает данные пользователя, который в данный момент вошел в базу данных (firebase).Мне удалось создать своего рода таблицу лидеров, которая печатает всех пользователей с данными на другой странице, но я не могу понять, где я был не прав.кто-нибудь может мне помочь?

https://snack.expo.io/@khal_d/proj-p-3

import React, { Component } from 'react';
import { View, TouchableOpacity, StyleSheet, Button, Text, ScrollView, ListItem } from 'react-native';
import { Input, Card} from 'react-native-elements';

import * as firebase from 'firebase';


export default class User extends Component {
   static navigationOptions = {
    title: 'UserInfo',
  };

  state = {
    data: [],
  };

  // Controllare qui
  componentDidMount(){
    //leggere array dal db
    const currentUID = firebase.auth().currentUser.uid;
    const path ="/users/" + currentUID;
    const users = firebase.database().ref(path);
    users.on("value", snap => {
      console.log("log di snap" + snap);
      //ciclo
      var elenco = [];
      snap.forEach(child => {
        elenco.push({
          name: child.val().name,
          surname: child.val().surname,
          email: child.val().email,
          image: child.val().image,
        })
      });

      console.log("altro log finale" + elenco);
      this.setState({data:elenco})
    });

  }

// controllare fino a qua

  render() {

    return (
      <ScrollView>
      <View>
        <Card> //fix evertything all'interno di card
          {
    this.state.data.map((l, i) => (
      <ListItem
        key={i}
        leftAvatar={{ source: { uri: l.image } }}
        title={l.name}
        subtitle={l.surname}

      />
    ))
  }
        </Card>
      </View>
      </ScrollView>
    );
  }
}

Ответы [ 3 ]

0 голосов
/ 07 февраля 2019

ListItem следует импортировать из react-native-elements, а не из react-native.

0 голосов
/ 07 февраля 2019

Я думаю, что проблема из-за комментария.В JSX комментарий с // не работает.Это будет рассматриваться как текст.

Вы должны изменить свои комментарии, как показано ниже, чтобы исправить вашу проблему 

    {/* fix evertything all'interno di card */}
0 голосов
/ 07 февраля 2019

Просто удалите комментарии и лишние { } из вашего кода в render () или используйте их, как показано ниже.В JSX вы не можете иметь // в render (): 

 render() {

    return (
      <ScrollView>
      <View>
        <Card> 

    { this.state.data && 
    this.state.data.map((l, i) => (
      <ListItem
        key={i}
        leftAvatar={{ source: { uri: l.image } }}
        title={l.name}
        subtitle={l.surname}

      />
    ))
    }

      </Card>
      </View>
      </ScrollView>
    );
  }
}

В iOS нет проблем с дополнительными синтаксисами в render(), но в Android это покажет эту ошибку.

Также из-за асинхронной проблемы setState у вас будет ошибка undefined is not an object.Поэтому лучше иметь условие {this.state.data && в вашем ListItem.Я надеюсь, что смогу помочь:)

...