如何重新加载反应组件？

Question

I am trying to create an online library, which allows people to issue books. I want to limit the number of issued books to one, ie a person can have only one issued book at a time. I have a firestore database for this. I read the number of books issued in ComponentDidMount(){} , and I have put an if-else statement to check how many books have been issued. For example, if someone has 1 book issued, it will display a different return() , if someone doesn't have 1 book issued, it will display another return() . It is working fine, but in the same component I have a button that can return the book ( NOT return as in return() , return is used here to refer to UN-ISSUE THE BOOK ), so I update the number of issued book of each user. But, I am not able to go the else statement. I guess I know why, I mean it checked the value once and entered the condition, but has no command to exit the conditions and check for other conditions. I figured that re-rendering the component should work, so please tell me how I can do this....

Also if there is any other solution to this problem in your mind, please share!

My Code (Sorry, I don't know how to add code in stackoverflow, new here)

import * as React from 'react';
import * as firebase from 'firebase';
import db from '../config'

import { StyleSheet, Text, View, Modal, ScrollView, TextInput , Image, TouchableOpacity, Alert, KeyboardAvoidingView} from 'react-native';
import { Header,Icon } from 'react-native-elements';

export default class AddItemScreen extends React.Component {
    
    constructor(){
        super()
        this.state = {
            itemName:'',
            itemDescription:'',
            userID : firebase.auth().currentUser.email,
            itemID:'',
            activeBarters:'',
            userDocID : '',
            itemDocID:'',
            requestedBarter:'',
            requestedBarterID:'',
            requestedBarterDescription:'',
            refresh:'',
        }
    }
    
    componentDidMount = ()=> {
        const userID = this.state.userID
        db.collection('users').where('email','==',userID).get().then(snapshot => {
            snapshot.forEach(doc => {
                var data = doc.data()
                this.setState({
                    activeBarters : data.activeBarters,
                    userDocID : doc.id
                })
            })
        })
        this.getRequestedBarter()
    }

    updateStatus = ()=> {
        const docID = this.state.itemDocID
        db.collection('items').doc(docID).update({
            'item_status' : 'received'
        })
    }

    addRequestedItem = ()=> {
        const itemName = this.state.requestedBarter
        const itemDescription = this.state.requestedBarterDescription
        const itemID = this.state.requestedBarterID
        const user = this.state.userID
        db.collection('receivedItems').add({
            'item_name' : itemName,
            'item_description' : itemDescription,
            'item_ID' : itemID,
            'item_status' : 'received',
            'userID' : user,
        })
    }

    addReceivedNotification = ()=> {
        const itemName = this.state.requestedBarter
        const userID = this.state.userID
        const message = "You received " + itemName + '. Congratulations!'
        db.collection('allNotifications').add({
            'notification_message' : message,
            'senderID' : userID,
            'targetedID' : userID,
            'notification_status':'unread',
            'itemName' : itemName,
        })
    }

    addNotification = ()=> {
        const itemName = this.state.itemName
        const userID = this.state.userID
        const message = 'You just added '+ itemName + ' to our item list! Thanks!'
        db.collection('allNotifications').add({
            'notification_message' : message,
            'senderID' : userID,
            'targetedID' : userID,
            'notification_status':'unread',
            'itemName' : itemName,
        })
    }

    getRequestedBarter = ()=> {
        const userID = this.state.userID
        db.collection('items').where('userID','==',userID).get().then(snapshot => {
            snapshot.forEach(doc => {
                if(doc.data().item_status!='received'){
                    this.setState({
                        requestedBarter:doc.data().item_name,
                        requestedBarterDescription:doc.data().item_description,
                        itemDocID:doc.id,
                        requestedBarterID:doc.data().item_ID
                    })
                }
            })
        })
    }

    addItem = async ()=> {
        const name = this.state.itemName
        const description = this.state.itemDescription
        const itemID = Math.random().toString(36).substring(2)
        const user = this.state.userID
        if (name && description) {
            db.collection('items').add({
                "item_name" : name,
                "item_description" : description,
                "item_ID" : itemID,
                "userID" : user,
                "item_status" : "available"
            })
            this.setState({
                itemName:'',
                itemDescription:'',
            })
            Alert.alert('Item Added Succesfully')
        }
        else {
            Alert.alert('Please fill Item Name and/or Description')
        }
    }

    updateAcitveBarters = (number)=> {
        const docID = this.state.userDocID
        const numberArg = number
        db.collection('users').doc(docID).update({
            activeBarters : numberArg,
        })
    }

    render(){
        
        if (this.state.activeBarters === 1) {
            return(
                <View style = {styles.container}>
                    <Header
                        backgroundColor={'#222831'}
                        centerComponent={{
                        text: 'Add Items',
                        style: { color: '#32e0c4', fontSize: 20 },
                        }}
                        leftComponent = {
                            <Icon 
                                name = 'bars' 
                                type = 'font-awesome' 
                                color = 'white' 
                                onPress = {
                                    ()=>{
                                        this.props.navigation.toggleDrawer()
                                    }
                                }
                            ></Icon>
                        }
                        rightComponent = {
                            <Icon 
                                name = 'plus' 
                                type = 'font-awesome' 
                                color = '#15aabf' 
                            ></Icon>
                        }
                    ></Header>
                    <Text style = {{color:'#eeeeee', textAlign : 'center', fontSize:18,marginTop:30}}>Sorry, You already have an active request!</Text>
                    <Text style = {{color:'#eeeeee', textAlign : 'center', fontSize:18,marginTop:30}}>{this.state.requestedBarter}</Text>
                    <Text style = {{color:'#eeeeee', textAlign : 'center', fontSize:18,marginTop:30}}>{this.state.requestedBarterDescription}</Text>
                    <TouchableOpacity
                        style={styles.button}
                        onPress = {()=>{
                            this.updateAcitveBarters(0)
                            this.updateStatus()
                            this.addReceivedNotification()
                            this.addRequestedItem()
                        }}
                    >
                        <Text style = {styles.buttonText}>I received the item</Text>
                    </TouchableOpacity>
                </View>
            )
        }
        
        else {
            return (
                <View style = {styles.container}>
                    <Header
                        backgroundColor={'#222831'}
                        centerComponent={{
                        text: 'Add Items',
                        style: { color: '#32e0c4', fontSize: 20 },
                        }}
                        leftComponent = {
                            <Icon 
                                name = 'bars' 
                                type = 'font-awesome' 
                                color = 'white' 
                                onPress = {
                                    ()=>{
                                        this.props.navigation.toggleDrawer()
                                    }
                                }
                            ></Icon>
                        }
                        rightComponent = {
                            <Icon 
                                name = 'plus' 
                                type = 'font-awesome' 
                                color = '#15aabf' 
                            ></Icon>
                        }
                    ></Header>
                    <TextInput
                        style = {styles.textInput}
                        placeholder = 'Item Name'
                        onChangeText={
                            (text)=>{
                                this.setState({
                                    itemName:text,
                                })
                            }
                        }
                        value = {this.state.itemName}
                    ></TextInput>
                    <TextInput
                        style = {[styles.textInput,{ height:300}]}
                        placeholder = 'Item Description'
                        multiline = {true}
                        onChangeText={
                            (text)=>{
                                this.setState({
                                    itemDescription:text,
                                })
                            }
                        }
                        value = {this.state.itemDescription}
                    ></TextInput>
                    <TouchableOpacity style = {styles.button} onPress = {()=>{
                        this.addItem()
                        this.updateAcitveBarters(1)
                        this.addNotification()
                        this.props.navigation.navigate('Notifications')
                        }}>
                        <Text style = {styles.buttonText}>Add Item</Text>
                        
                    </TouchableOpacity>
                </View>
            )
        }

    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:'#393e46',
        alignSelf:'center',
        width:'100%'
    },
    title:{
        backgroundColor:'#222831',
        color:'#32e0c4',
        fontSize:23,
        padding:5,
        alignContent:'center',
        textAlign:'center',
    },
    buttonText:{
        padding:10,
        color:'#32e0c4',
        alignSelf:'center',
        textAlign:'center',
    },
    button:{
        backgroundColor:'#222831',
        width:100,
        marginTop:40,
        alignSelf:'center',
        height:60,
        alignItems:'center',
    },
    textInput:{
        marginTop:30,
        padding:10,
        alignSelf:'center',
        borderWidth:5,
        borderColor:'#32e0c4',
        width:300,
        color:"#eeeeee",
    },
})

Answer 1

Call your firebase API and re-initialize your state like you did in componentDidMount

  updateApi() {
        const userID = this.state.userID
        db.collection('users').where('email','==',userID).get().then(snapshot => {
            snapshot.forEach(doc => {
                var data = doc.data()
                this.setState({
                    activeBarters : data.activeBarters,
                    userDocID : doc.id
                })
            })
        })
        this.getRequestedBarter()

    }

    componentDidMount() {
      this.updateApi();
    }
  
    updateAcitveBarters = (number)=> {
        const docID = this.state.userDocID
        const numberArg = number
        db.collection('users').doc(docID).update({
            activeBarters : numberArg,
        })
        this.updateApi();
    }