Invariant Violation：Invariant Violation：文本字符串必须在 <Text> 组件内呈现答案

【问题标题】：Invariant Violation: Invariant Violation: Text strings must be rendered within a <Text> componentInvariant Violation：Invariant Violation：文本字符串必须在 <Text> 组件内呈现
【发布时间】：2019-07-01 20:58:06
【问题描述】：

在 react-native 中创建应用程序时遇到了这个问题。基本上我应该创建一个页面来打印当前登录到数据库（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>
    );
  }
}

【问题讨论】：

标签： javascript reactjs react-native native

【解决方案1】：

我认为问题在于评论。在 JSX 中，用 // 注释不起作用。它将被视为文本。

您必须像下面这样更改您的 cmets 才能解决您的问题

    {/* fix evertything all'interno di card */}

【讨论】：

【解决方案2】：

只需从 render() 中的代码中删除 cmets 和额外的 { } 或按如下方式使用它们。在 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的错误。所以最好在你的 ListItem 上有{this.state.data && 条件。希望能帮到你:)

【讨论】：

【解决方案3】：

ListItem 应该从 react-native-elements 导入，而不是从 react-native。

【讨论】：