没有将值传递给组件 - React Native

Question

我正在从云存储中检索数据作为对象数组，并将对象的值作为道具传递给另一个组件：

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

对象数组如下所示：

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

期望在我的 ScrollView 中我会有一个“提示”列表。相反，我什么也得不到，就好像这些值没有被传递给组件一样。

提前致谢。

Answer 1

RenderTips 返回一个 Promise，这意味着它在第一次渲染时不会返回任何东西，但只有在 Promise 解决时才会返回。您需要在 renderTips 中使用 setState 来告诉 react 在数据到来时重新渲染您的组件。为 pendingTips 创建一个单独的状态数组对象，然后将 pendingTips 组件添加到该数组并调用 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

您可以通过将doc 设置为状态属性并将用于获取数据的函数移动到某个生命周期方法或效果挂钩来解决此问题。

你可以试试这样的：

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