Какой жизненный цикл компонента вызывается каждый раз, когда экран монтируется в реагирующем режиме?

Question

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

 export default class Home extends React.Component {

      constructor(props) {
        super(props);

        this.state = {
          backgroundImageUrl : [],
        }
      }



      static navigationOptions = {
        header: null ,
        headerForceInset: {vertical: 'never'},
      };



    componentWillMount()
      {
        firebase.database().ref().child("Card_Images/").on("child_added", function(snapshot) {


          this.setState({
            backgroundImageUrl : [...this.state.backgroundImageUrl, snapshot.val()],
          })
        }.bind(this))

      }





        handleTap = () => {
          //  console.log("item", item);this.props.screenProps.navigation.navigate("ItemDetails",
          this.props.navigation.navigate("ItemDetails")};

        renderItem = ({ item }) => {
          return (

            <TouchableOpacity style={styles.itemContainer}
            onPress = {this.handleTap}>

            <View style = {{height:180,width:Dimensions.get('window').width-32,marginLeft:16,marginRight:16,backgroundColor: 'black',marginTop: 16,marginBottom:16,
         borderRadius: 16}}>

           <Image
                        style={{
                         width:Dimensions.get('window').width-32,
                         height:160,
                         resizeMode:"cover",
                         alignSelf: 'center',
                         borderRadius:8,

                        }}
                        source = {{ uri: item }}
                        //onPress = {() => this.selectCity()}
                      />

        <View style = {styles.DesignInformation}>
                    <Text style={{color:'grey',fontSize: 10,fontWeight:"bold",marginLeft:2}}> Rishavh Gupta </Text>
                    <Text style={{color:'grey',textAlign:"right",fontSize: 10,fontStyle: 'italic',marginRight:8,
                    shadowOffset: { width: 5, height: -1 }, elevation:4,borderBottomColor:'white',borderBottomWidth:0.8,shadowColor: "gray",shadowOpacity: 0.5,shadowRadius: 4}}>www.cometgraphic.com </Text>

        </View>

                    </View>
        </TouchableOpacity>
          );
        };

      render() {
        console.log("images are", this.state.backgroundImageUrl)
        // console.log("sd", this.state.backgroundImageUrl)


        return (
                <View style = {styles.container}>


                <FlatList 
          data={this.state.backgroundImageUrl}
          renderItem={this.renderItem}
          keyExtractor={item => item.id}
          numColumns={numColumns}
           />

Answer 1

Чтобы устранить проблему, я хотел бы знать, сколько записей содержится в вашем массиве изображений во второй раз. В качестве альтернативы вы можете сохранить список в своем хранилище приставок, вместо того чтобы сохранять его в состоянии вашего компонента.