React Native 未显示更新后的数组 [重复]

Question

我使用打击代码从火力基地获取数据：

import firebase from 'firebase';

import 'firebase/database'

firebase.database().ref().child('users').on('value',(snapshot)=>{

    if(snapshot.exists()){

      snapshot.forEach((datasnapshot)=>{

        data.push({key: datasnapshot.key.toString()})

      })
    } else {
      data.push({key: 'No one has written yet'})
    }
});

var data = [];

export default data;

后来我尝试导入变量数据显示如下：

import React from 'react';
import {StyleSheet, Text, StatusBar, View, TouchableOpacity, ScrollView } from 'react-native';
import firebase from 'firebase';
import 'firebase/database'
import data from './getdata';

export default function Index({navigation}) {

  return (

    <View style={styles.container}>

      <Text style={{color: '#000000', fontSize: 30, fontWeight: 'bold', marginTop: StatusBar.currentHeight}}>Index</Text>

      <ScrollView>

        {data.map((item,key)=>{

          if(item.key == "No one has written yet"){return(<Text key={key} style={styles.item}>{item.key}</Text>)}

          else{

            return(

              <TouchableOpacity key={key}  onPress={()=>navigation.navigate('Details',item.key)}>
                <Text style={styles.item}>{item.key}</Text>
              </TouchableOpacity>

            )

          }

        })}

      </ScrollView>

    </View>

  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  item: {
    marginTop: 10,
    fontSize: 20,
    fontWeight: 'bold',
    color: '#000000',
    textAlign: 'center'
  }
});

问题是它不显示在“数据”数组被“push()”函数更新后存储的数据，直到我再次保存它并在“expo go”应用程序中刷新代码。

这是应用打开时最初显示的图像：

Click for the image

Answer 1

我认为问题在于您的组件在获取数据后没有重新渲染，因此未显示新数据。
我会使用 Flatlist，因为它具有 extraData 属性，当数据集更改时，它将使 Flatlist 重新呈现：
“通过将 extraData={selected} 传递给 FlatList，我们确保 FlatList 本身会在状态更改时重新渲染。如果不设置此道具，FlatList 将不知道它需要重新渲染任何项目，因为它是 PureComponent 和道具比较不会显示任何更改。”
https://docs.expo.dev/versions/latest/react-native/flatlist/

所以将您的 SrollView 更改为...

    <FlatList
      data={data}
      extraData={data}
      renderItem={({ item, key }) => {
          if(item.key == "No one has written yet"){
            return(<Text key={key} style={styles.item}>{item.key}</Text>)
          }else{
            return(
              <TouchableOpacity key={key}  onPress={()=>navigation.navigate('Details',item.key)}>
                <Text style={styles.item}>{item.key}</Text>
              </TouchableOpacity>
            )
          }}  
      />