javascript - 从 Firestore 获取数据后，无法在平面列表中显示数据

Question

我的firestore中有一些数据。结构是：

User -> DocId(Some id)-> name(String), number(String), friends (array)

我得到了朋友数组，并附加到我的本地数组数据中。现在，当我在平面列表中渲染时。它没有显示。但是我在本地创建的相同临时数据工作正常。从 Firestore 获取后，我检查了我的数组数据计数。它显示正确的计数。但无法在平面列表中显示数据。

我的代码：

  import firebase from '@react-native-firebase/app';
    import firestore from '@react-native-firebase/firestore';

    UserArray =[]

    export default class HomeScreen extends React.Component {


 constructor(props) {
        super(props);
        this.state = {
            UserArray: [],
        }
      }
        componentWillMount() {

            firebase.firestore().doc(`User/${'beQVEcfLsXV8JhA8L2SDDq03bmD3'}`)
             .get()
             .then(doc => {
                this.setState({UserArray: doc.data().friends})
           })
         }

        renderPost = post => {
            return (
                <View style={styles.feedItem}>
                    <Feather  name="book" style={styles.avatar}  size={30}/>
                    <View style={{ flex: 1 }}>
                        <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
                            <View>
                                <Text style={styles.name}>{post.name}</Text>
                                  <Text style={styles.timestamp}>{post.name}  |  {post.name}</Text>
                            </View>
                        </View>
                    </View>
                    <Feather name="chevron-right" style={{color: "#808080", alignSelf: 'center'}} size={20}/>
                </View>
            );
        };

        render() {
            return (
                <View style={styles.container}>
                    {
                        UserArray.length ?
                        (<FlatList
                            style={styles.feed}
                            data={UserArray}
                            keyExtractor={(index) => index.toString()}
                            renderItem={({ item }) => this.renderPost(item)}
                            // keyExtractor={item => item.id}
                            showsVerticalScrollIndicator={false}
                        ></FlatList>) :
                        (
                 <View style={{  width: '70%', alignSelf: 'center',justifyContent: 'center' , alignItems: 'center', marginTop: '20%'}}>
                    <Feather name="smile" color="#009387" size={40}/>
                    <Text style={{paddingTop: 20, textAlign: 'center', fontSize: 15, fontWeight: 'bold', color: '#A9A9A9'}}>Hey folk, You dont' have any friends list</Text>
                </View>
                        )
                    }

                </View>
            );
        }
    }

在我的屏幕上，我总是得到。你没有任何数据。

但是在componentDidMount()我从firestore获取数据之后。在我的里面：

.then(doc => {
alert(UserArray.length);
})

它显示正确的数组计数。这是我的朋友数组：

{
  "name": "quaroe",
"number": "3940904",
friends: [
     {
       "name": "alber"
     },
     {
       "name": "romea"
     },
     {
       "name": "basea"
     }
]
}

我的怀疑是render之前调用过componentDidMount。但我试过了componentWillMount。我添加了警报。总是render先被调用，然后才被componentWillMount or componentDidMount调用

标签： javascriptfirebasereact-nativevisual-studio-codegoogle-cloud-firestore

Answer 1

将您的 UseArray 置于该状态。我相信平面列表没有显示任何内容，因为当它被渲染时，您的 firebase 功能尚未完成，因此 UseArray 为空。并且渲染无法检测到常量 UseArray 的变化，这就是为什么即使您的获取成功也没有显示任何列表的原因。

尝试这个

import firestore from '@react-native-firebase/firestore';

export default class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userArray: [],
    };
  }

  componentDidMount() {
    firebase
      .firestore()
      .doc(`User/${'beQVEcfLsXV8JhA8L2SDDq03bmD3'}`)
      .get()
      .then(doc => {
        this.setState({userArray: doc.data().friends});
      });
  }

  renderPost = post => {
    return (
      <View style={styles.feedItem}>
        <Feather name="book" style={styles.avatar} size={30} />
        <View style={{flex: 1}}>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
            <View>
              <Text style={styles.name}>{post.name}</Text>
              <Text style={styles.timestamp}>
                {post.name} | {post.name}
              </Text>
            </View>
          </View>
        </View>
        <Feather
          name="chevron-right"
          style={{color: '#808080', alignSelf: 'center'}}
          size={20}
        />
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        {this.state.userArray && this.state.userArray.length > 0 ? (
          <FlatList
            style={styles.feed}
            data={this.state.userArray}
            keyExtractor={index => index.toString()}
            renderItem={({item}) => this.renderPost(item)}
            // keyExtractor={item => item.id}
            showsVerticalScrollIndicator={false}
          />
        ) : (
          <View
            style={{
              width: '70%',
              alignSelf: 'center',
              justifyContent: 'center',
              alignItems: 'center',
              marginTop: '20%',
            }}>
            <Feather name="smile" color="#009387" size={40} />
            <Text
              style={{
                paddingTop: 20,
                textAlign: 'center',
                fontSize: 15,
                fontWeight: 'bold',
                color: '#A9A9A9',
              }}>
              Hey folk, You dont' have any friends list
            </Text>
          </View>
        )}
      </View>
    );
  }
}