值未传递给组件-React Native

Question

I'm retrieving data from cloud firestore as an array of objects and I pass the object's values as props to another component:

    renderTips() {
        firebase.firestore().collection('pendingtips').get()
        .then(doc => { 
            doc.forEach(tip => {
                const tipData = tip.data();//array's object
                console.log(tipData.tip); //prints tip as expected
                console.log(tipData.name); //prints name as expected
                return <PendingTip key={tipData.tip} name={tipData.name} tip={tipData.tip} />; //doesn't returning enything
            });
        })
        .catch(() => Alert.alert('error'));
    }

    render() {
        return (
            <View style={styles.containerStyle}>
                <ScrollView style={styles.tipsContainerStyle}>
                    {this.renderTips()}
                </ScrollView>
            </View>
        );
    }

The array of objects looks like this:

{ name: 'Danny', tip: 'Be careful when crossing the road' },
{ name: 'Alex', tip: 'Drink water' }

The expectation is that in my ScrollView I will have a list of "tips". instead, I get nothing back as if the values are not being passed to the component.

thanks in advance.

Answer 1

RenderTips returns a promise which means it won't return anything at first render but only when the promise resolves. You need setState in renderTips to tell react to re-render your component when data comes. Make a seperate state array object for pendingTips then add the pendingTips component to that array and call setState

this.state = { pendingTips: [] }

    componentDidMount() {
let pendingTips = []  // declare an array
        firebase.firestore().collection('pendingtips').get()
        .then(doc => { 

            doc.forEach(tip => {
                const tipData = tip.data();//array's object
                pendingTips.push(<PendingTip key={tipData.tip} name={tipData.name} tip={tipData.tip} />);  // push items in the array 
            });
this.setState({pendingTips})
        })
        .catch(() => Alert.alert('error'));
    }

    render() {
        return (
            <View style={styles.containerStyle}>
                <ScrollView style={styles.tipsContainerStyle}>
                    {this.state.pendingTips.map(tips => tips)}
                </ScrollView>
            </View>
        );
    }

Answer 2

You can solve this issue by setting doc as a state property and by moving the function for getting data into either some lifecycle method or effect hook.

You can try something like this:

    componentDidMount () {
        firebase.firestore().collection('pendingtips').get()
        .then(doc => { 
            this.setState({doc})
        }) 
    }

    renderTips() {
        const {doc} = this.state 
        return doc ? doc.map(tip => {
            const tipData = tip.data();
            return <PendingTip 
            key={tipData.tip} 
            name={tipData.name} tip={tipData.tip} />;
        }) : null
    }

    render() {
        return (
            <View style={styles.containerStyle}>
                <ScrollView style={styles.tipsContainerStyle}>
                    {this.renderTips()}
                </ScrollView>
            </View>
        );
    }