#javascript #reactjs #react-native
#javascript #reactjs #react-native
Вопрос:
Я пытаюсь создать онлайн-библиотеку, которая позволяет людям выпускать книги. Я хочу ограничить количество выпущенных книг одной, т.е. У человека может быть только одна выпущенная книга одновременно. Для этого у меня есть база данных firestore. Я прочитал количество выпущенных книг ComponentDidMount(){} и ввел оператор if-else, чтобы проверить, сколько книг было выпущено. Например, если у кого-то выпущена 1 книга, она отобразит другую return() , если у кого-то не выпущена 1 книга, она отобразит другую return() . Он работает нормально, но в том же компоненте у меня есть кнопка, которая может возвращать книгу (НЕ return, как в return() , return здесь используется для обозначения ОТМЕНЫ ВЫПУСКА КНИГИ), поэтому я обновляю номер выпущенной книги каждого пользователя. Но я не могу перейти к оператору 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 amp;amp; 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",
},
})
Комментарии:
1. Чтобы не быть грубым или что-то в этом роде, пожалуйста, отправьте ответ как можно скорее. Я должен отправить этот проект всего за 7 дней и должен работать над другими вещами в проекте…
2. Опубликуйте свой код. В любом случае, установите флаг состояния для вашего компонента
updatedи setState после отмены выпуска книги. ТолькоsetStateможет обновить ваш компонент.
Ответ №1:
Вызовите свой firebase API и повторно инициализируйте свое состояние, как вы делали в 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();
}
Комментарии:
1. Для пояснения, ваш компонент не перерисовал, когда вы ожидали, потому что вы никогда не обновляли
activeBartersсостояние. Вызовthis.setState({ activeBarters })исправляет это.