मुझे यह समस्या हो रही है जहां इस पृष्ठ के पहले रेंडर में टिप्पणियों का मूल्य अपडेट नहीं होता है, लेकिन जब मैं वापस जाता हूं और इस स्क्रीन को फिर से दर्ज करता हूं तो यह अपडेट हो जाता है। मुझे पता है कि यूजस्टेट एसिंक्रोनस है और शायद यही मेरी समस्या पैदा कर रहा है। मैंने केवल एक सप्ताह पहले रिएक्ट नेटिव के साथ शुरुआत की थी और मुझे नहीं पता कि मैं इस मुद्दे को कैसे हल कर सकता हूं। यहाँ मेरा कोड है:

function Comment(props) {
    const [comments, setComments] = useState([])
    const [text, setText] = useState("")

    const textInput = React.createRef();


    const retrieveComments = () => {
        firebase.firestore()
        .collection("posts")
        .doc(props.route.params.uid)
        .collection("userPosts")
        .doc(props.route.params.postId)
        .collection("comments")
        .orderBy("creation","desc")
        .get()
        .then((snapshot)=>{
            let comments= snapshot.docs.map(doc => {
                const data = doc.data()
                const id = doc.id;
                return {id, ...data}
            })
            for(let i=0;i<comments.length;i++){
                if(comments[i].hasOwnProperty("user")){
                    continue
                }
                const user = props.users.find(x => x.uid === comments[i].creator)
                if(user == undefined){
                    props.fetchUsersData(comments[i].creator, false)
                }else{
                    comments[i].user = user
                }
            }
            setComments(comments)
        })
    }

    useEffect(() => {
        retrieveComments()
    },[]);

    useEffect(()=>{
        console.log(comments)
    },[comments.length])



    const onCommentSend = () => {
        firebase.firestore()
        .collection("posts")
        .doc(props.route.params.uid)
        .collection("userPosts")
        .doc(props.route.params.postId)
        .collection("comments")
        .add({
            creator: firebase.auth().currentUser.uid,
            text,
            creation: firebase.firestore.FieldValue.serverTimestamp()
        })
        .then(retrieveComments)
        setText("")
        textInput.current.clear()
    }
    

    return (
        <View style={{flex:1}}> 
            <FlatList   
                numColumns={1}
                horizontal={false}
                data={comments}
                renderItem={({item})=> (
                    <View>
                            {item.user !== undefined && item.creation!==null ?
                                <View style={{marginHorizontal:10, marginVertical:5}}>
                                    <Text style={{fontWeight:'bold'}}
                                    onPress={()=>props.navigation.navigate('Profile',{uid: item.user.uid})}>{item.user.name}</Text>
                                    <Text>{item.text}</Text>
                                    <TimeAgo style={{color:'grey'}}dateTo={item.creation.toDate()}/>
                                </View>
                            :null}
                        <View
                        style={{
                            borderBottomColor: 'silver',
                            borderBottomWidth: 1,
                        }}/>
                    </View>
                )}
            />
            <KeyboardAvoidingView enabled behavior={Platform.select({android: undefined, ios: 'padding'})} keyboardVerticalOffset={64} >
                <View style={{justifyContent:'flex-end', flexDirection:'row'}} behavior="height">
                    <TextInput
                        style={{flex:1}}
                        placeholder="Write a comment..."
                        onChangeText={(text)=> setText(text)}
                        theme={{colors: {text: 'black', primary: 'black'}}}
                        ref={textInput}
                    />
                    <TouchableOpacity
                    onPress={()=>{onCommentSend()}}
                    style={{justifyContent:'center',alignItems:'center', flex:1, backgroundColor:'black'}}>
                        <MaterialCommunityIcons name="send-circle-outline" color='white' size={40}/>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        </View>
    )
}


const mapStateToProps = (store) => ({
    users: store.usersState.users
})
const mapDispatchProps = (dispatch) => bindActionCreators({ fetchUsersData }, dispatch);


export default connect(mapStateToProps,mapDispatchProps)(Comment);

पीएस .: जब मैं उस दूसरे उपयोग को डालता हूं तो यह सही ढंग से लॉग करता है, और मैं इसे हल करने के लिए विचारों से बाहर हूं।

ध्यान देने के लिए आपको धन्यवाद

0
Diogo Boinas 12 फरवरी 2021, 18:26
आप FlatList की extraData संपत्ति का उपयोग करने का प्रयास कर सकते हैं और इसे extraData={comments} की तरह सेट कर सकते हैं
 – 
dianaqqq
12 फरवरी 2021, 18:42
आपकी मदद के लिए बहुत बहुत धन्यवाद @dianaqqq लेकिन यह अभी भी काम नहीं कर रहा है :(
 – 
Diogo Boinas
12 फरवरी 2021, 18:53
उसके बाद मैं जो कोशिश कर सकता हूं वह है key={comments.length} सेट करना। (हालांकि, मैं आपको उस कॉल को करने और राज्य का प्रबंधन करने के लिए redux प्रवाह का उपयोग करने की सलाह दूंगा)
 – 
dianaqqq
12 फरवरी 2021, 19:02
धन्यवाद, मैं इसे redux में पास करने जा रहा हूं, मैं जो कुछ भी करता हूं वह काम नहीं कर रहा है
 – 
Diogo Boinas
12 फरवरी 2021, 19:09

1 उत्तर

सबसे बढ़िया उत्तर

यदि आप राज्य प्रबंधन के लिए redux का उपयोग कर रहे हैं, तो पुनर्प्राप्ति फ़ंक्शन को redux-saga या redux-thunk जैसे redux मिडलवेयर के साथ लागू किया जाना चाहिए। और आपके घटक को प्रोप के रूप में टिप्पणियां प्राप्त करनी चाहिए;

0
Erdenezaya 12 फरवरी 2021, 18:52