从 Firebase 渲染 FlatList 中的数据答案

【问题标题】：Rendering data in FlatList from firebase从 Firebase 渲染 FlatList 中的数据
【发布时间】：2018-04-11 01:54:14
【问题描述】：

我正在使用 React Native 0.49。我从 firebase 获取数据，用户列表 users/，此列表中的每个项目都设置为这样 firebase.database().ref('users/' + userId).set(userInfo) userId 是 currentUser 的 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: {…}}

【问题讨论】：

标签： firebase react-native firebase-realtime-database redux

【解决方案1】：

除对象数组外的平面列表，但 Firebase 将数据作为映射返回，例如 {key: value} 对，因此您应该将此映射转换为数组，您可以安装 lodash 模块并使用 _.values() 函数来执行此操作

【讨论】：

我应该把那段代码放在哪里？在getData() 函数中？还是我在减速机中这样做？

【解决方案2】：

FlatList 组件期望其 data 属性是一个数组。您将它作为对象传递。您可以将其更改为对象数组。然后在您的_renderItem 方法中，item 也将是一个对象，它不能在<Text> 中立即呈现，您必须从项目对象中提取一个文本值，然后将其呈现为：<Text>SOME_TEXT_NOT_AN_OBJECT</Text>

您可以将您的人员对象转换为数组并将其传递给<FlatList，如下所示：

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

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

【讨论】：

【解决方案3】：

Flatlist 数据需要数组中每个对象的键，您可以像这样转换 firebase 结果：

Object.entries(peopleFromFirebase).map(item => ({...item[1], key: item[0]}));

所以来自 firebase 的 json 像这样：

{
  cpycwkz7exVBzmhaLEtHjMW66wn1: {
    name: 'wade owen watts', 
    phone:'+447...'
  }, 
  UbIITfUANmb63cYE2x7dZRZ0pfK2: {
    name: 'Helen Harris', 
    phone:'+448...'
  }
}

变成：

[
  {
    key: 'cpycwkz7exVBzmhaLEtHjMW66wn1',
    name: 'wade owen watts', 
    phone:'+447...'
  }, 
  {
    key:'UbIITfUANmb63cYE2x7dZRZ0pfK2',
    name: 'Helen Harris', 
    phone:'+448...'
  }
]

【讨论】：