firebase - 从 firebase 渲染 FlatList 中的数据

Question

我正在使用 React Native 0.49。我从 firebase 获取数据，用户列表 users/ , 此列表中的每个项目都设置为这样 firebase.database().ref('users/' + userId).set(userInfo)用户 ID 是 uid当前用户的。

现在我正在取回(在行动中 - 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} 
        />
    );
}

当控制台日志 people这是结果: {cpycwkz7exVBzmhaLEtHjMW66wn1: {…}, UbIITfUANmb63cYE2x7dZRZ0pfK2: {…}}

Answer 1

FlatList组件期望其 data prop 是一个数组。您将它作为对象传递。您可以将其更改为对象数组。然后也在您的 _renderItem 中方法item将是一个对象，它不能在 <Text> 中立即渲染，您必须从 item 对象中提取文本值，然后将其呈现为:<Text>SOME_TEXT_NOT_AN_OBJECT</Text>
您可以将您的 people 对象转换为数组并将其传递给 <FlatList像这样:

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

现在各 item在 _renderItem方法将是一个对象，您可以从任何键中提取值并将其呈现在 <Text> 中。 .