[英]How do I re-load a react component?
我正在嘗試創建一個在線圖書館,讓人們可以發行書籍。 我想將發行的書的數量限制為一本,即一個人一次只能擁有一本發行的書。 為此,我有一個 firestore 數據庫。 我在ComponentDidMount(){}
中讀取了發行的書籍數量,並放置了一個 if-else 語句來檢查已經發行了多少本書。 例如,如果某人發行了 1 本書,它將顯示不同的return()
,如果某人沒有發行 1 本書,它將顯示另一個return()
。 它工作正常,但在同一個組件中我有一個可以歸還書籍的按鈕(不像return()
那樣返回,這里使用 return 來指代 UN-ISSUE THE BOOK ),所以我更新了已發行書籍的數量每個用戶的。 但是,我無法 go else 語句。 我想我知道為什么,我的意思是它檢查了一次值並進入了條件,但沒有命令退出條件並檢查其他條件。 我認為重新渲染組件應該可行,所以請告訴我該怎么做……
另外,如果您還有其他解決此問題的方法,請分享!
我的代碼(抱歉,我不知道如何在 stackoverflow 中添加代碼,這里是新的)
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",
},
})
調用您的 firebase API 並重新初始化您的 state 就像您在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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.