首页 文章

从firebase渲染FlatList中的数据

提问于
浏览 次
3

我正在使用React Native 0.49 . 我有从firebase获取的数据，用户列表 users/ ，此列表中的每个项目都设置为这样 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} 
        />
    );
}

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

firebase react-native firebase-realtime-database redux

3 回答

  • 3

    FlatList 组件期望其 data prop是一个数组 . 您将它作为对象传递 . 您可以将其更改为对象数组 . 然后在 _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> 中呈现它 .

    回复于
  • 2

    除了对象数组之外的平面列表但是firebase将数据作为 Map 返回，如{key：value}对，所以你应该将这个 Map 转换为数组，你可以安装lodash模块并使用_.values（）函数来做

    回复于
  • 2

    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...'
  }
]
    回复于

相关问题