Javascript 如何重新加载react组件？

我正在尝试创建一个在线图书馆，允许人们发行图书。我想将已发行图书的数量限制为一本，即一个人一次只能拥有一本已发行图书。我有一个firestore数据库。我阅读了在

ComponentDidMount（）{}

中发行的图书数量，并用if-else语句检查了发行的图书数量。例如，如果某人发行了一本书，它将显示不同的

return（）

，如果某人没有发行一本书，它将显示另一本

return（）

。它工作正常，但在同一个组件中，我有一个按钮可以返回图书（不是像

return（）

中那样返回，这里使用return表示取消发行图书），因此我更新了每个用户的已发行图书数量。但是，我不能接受else的陈述。我想我知道为什么，我的意思是它检查了一次值并输入了条件，但没有命令退出条件并检查其他条件。我认为重新渲染组件应该可以工作，所以请告诉我如何做到这一点

此外，如果您有任何其他解决方案，请分享

我的代码（很抱歉，我不知道如何在stackoverflow中添加代码，此处新增）

import*as React from'React'；
从“firebase”导入*作为firebase；
从“../config”导入数据库
从“react native”导入{样式表、文本、视图、模式、滚动视图、文本输入、图像、TouchableOpacity、警报、键盘AvoidingView}；
从“react native elements”导入{Header，Icon}；
导出默认类AddItemScreen扩展React.Component{
构造函数（）{
超级（）
此.state={
项目名称：“”，
项目描述：“”，
userID:firebase.auth（）.currentUser.email，
itemID:“”，
主动易货：''，
userDocID:“”，
itemDocID:“”，
请求的易货：“”，
请求的BarterId:“”，
requestedBarterDescription:“”，
刷新：“”，
}
}
componentDidMount=（）=>{
const userID=this.state.userID
db.collection（'users'）。其中（'email'，'='，userID'）。get（）。然后（快照=>{
snapshot.forEach（doc=>{
var data=doc.data（）
这是我的国家({
activeBarters:data.activeBarters，
userDocID:doc.id
})
})
})
this.getRequestedBarter（）
}
更新状态=（）=>{
const docID=this.state.itemDocID
db.collection（'items'）.doc（docID）.更新({
“项目状态”：“已收到”
})
}
addRequestedItem=（）=>{
const itemName=this.state.requestedBarter
const itemsdescription=this.state.requestedBarterDescription
const itemID=this.state.requestedBarterID
const user=this.state.userID
db.collection（'receivedItems'）。添加({
“项目名称”：项目名称，
“项目描述”：项目描述，
“项目ID”：项目ID，
“项目状态”：“已收到”，
“userID”：用户，
})
}
addReceivedNotification=（）=>{
const itemName=this.state.requestedBarter
const userID=this.state.userID
const message=“您收到了“+itemName+”。祝贺您！”
db.collection（'allNotifications'）。添加({
“通知消息”：消息，
“senderID”：用户ID，
“targetedID”：用户ID，
“通知状态”：“未读”，
“itemName”：itemName，
})
}
addNotification=（）=>{
const itemName=this.state.itemName
const userID=this.state.userID
const message='您刚刚将'+itemName+'添加到我们的项目列表中！谢谢！'
db.collection（'allNotifications'）。添加({
“通知消息”：消息，
“senderID”：用户ID，
“targetedID”：用户ID，
“通知状态”：“未读”，
“itemName”：itemName，
})
}
getRequestedBarter=（）=>{
const userID=this.state.userID
db.collection（'items'）。其中（'userID'，'='，userID'）。get（）。然后（快照=>{
snapshot.forEach（doc=>{
如果（doc.data（）.item_status！='received'）{
这是我的国家({
requestedBarter:doc.data（）.项目名称，
requestedBarterDescription:doc.data（）.项目描述，
itemDocID:doc.id，
requestedBarterID:doc.data（）.item\u ID
})
}
})
})
}
addItem=async（）=>{
const name=this.state.itemName
const description=this.state.itemsdescription
const itemID=Math.random（）.toString（36）.子字符串（2）
const user=this.state.userID
if（名称和说明）{
db.collection（'items'）。添加({
“项目名称”：名称，
“项目描述”：描述，
“项目ID”：项目ID，
“userID”：用户，
“项目状态”：“可用”
})
这是我的国家({
项目名称：“”，
项目描述：“”，
})
Alert.Alert（'已成功添加项目'）
}
否则{
Alert.Alert（'请填写项目名称和/或说明'）
}
}
UpdateCitveBarters=（数字）=>{
const docID=this.state.userDocID
常量numberrarg=数字
db.collection（'users'）.doc（docID）.update({
以物易物：数字，
})
}
render（）{
if（this.state.activeBarters==1）{
返回(
}
rightComponent={
}
>
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",
    },
})

  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();
    }