从firebase渲染FlatList中的数据

发布时间：2020-12-15 09:32:50 所属栏目：百科来源：网络整理

导读：我正在使用React Native 0.49.我有从firebase获取的数据,用户列表用户/,此列表中的每个项目都设置为此firebase. database().ref(‘users /’userId).set(userInfo)userId是currentUser的uid. 现在我回来了(在actions – redux中)： export function getPeopl

我正在使用React Native 0.49.我有从firebase获取的数据,用户列表用户/,此列表中的每个项目都设置为此firebase. database().ref(‘users /’userId).set(userInfo)userId是currentUser的uid.

现在我回来了(在actions – redux中)：

export function getPeople(){
    return (dispatch) => {
        dispatch(getPeopleRequest());
        getData().then(result => {
            dispatch(getPeopleSuccess(result.val()))
        })
        .catch(error => {
            dispatch(getPeopleFailure(error))
        }); 
    }
}

const getData = () => {
    const userRef = firebase.database().ref('users/').limitToFirst(20);
    return userRef.once('value');     
}

在组件中,我试图在FlatList中渲染数据,但它没有渲染任何东西,我不知道我做错了什么：

componentDidMount(){
   this.props.getPeople();
}
_renderItem = ({ item }) => (

    <View style={{flex: 1}}>
        <Text>{item}</Text>
    </View>
);

render(){
    const { inProgress,people,error } = this.props.peopleData;
    return (
        <FlatList
            data={people}
            renderItem={this._renderItem} 
        />
    );
}

当控制台记录人员时,这是结果：
{cpycwkz7exVBzmhaLEtHjMW66wn1：{…},UbIITfUANmb63cYE2x7dZRZ0pfK2：{…}}

解决方法

FlatList组件期望其数据prop是一个数组.您将它作为对象传递.您可以将其更改为对象数组.然后在你的_renderItem方法中,该项目将是一个对象,并且无法在< Text>中立即呈现,您必须从项目对象中提取文本值,然后将其呈现为：< Text> SOME_TEXT_NOT_AN_OBJECT< /文字和GT; 您可以将人员对象转换为数组并将其传递给< FlatList,如下所示：

render(){
    const { inProgress,error } = this.props.peopleData;
    let ArrayOfPeopleObject = Object.values(people)
    return (
        <FlatList
            data={ArrayOfPeopleObject}
            renderItem={this._renderItem} 
        />
    );
}

现在_renderItem方法中的每个项都是一个对象,您可以从任何键中提取值并在< Text>中呈现它.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!