如何将对象迭代到平面列表中 - 反应原生？

Posted 2023-02-22

【中文标题】如何将对象迭代到平面列表中 - 反应原生？

【英文标题】：How to Iteration object into flatlist - react native?

【发布时间】：2019-12-24 01:23:24

【问题描述】：

我正在用 react native 开发一个聊天列表，

并将消息正文“实时”保存到 firebase 中， DB的结构是这样的

    dtnMG3dVEQXL1TPct3awl927jax2: // user key
       -LmUSeyWtBPqcoN8l6fd: // msg body
             0: user: …, text: "hey", createdAt: "2019-08-17T12:04:09.182Z"
       -LmUgcbdzElxWpLkN-F9: […]
       -username: "Bran" // user name

    y5eAQppoEZRELsDL3hLbY5b0A763:
       -Lm_K6xwDVqaA7UIF7hf: […]
       -Lm_LXWdK1rNk-G3_NlC: […]
       -username: "Alex"

在获取数据后，我得到了您在上面看到的对象，现在我想将这些数据添加到 <FlatList/> 但我无法迭代这些值，因为它包含具有嵌套值的嵌套对象等等！在renderItem 内置方法中，因为它不是对象的平面数组

那么我怎样才能循环这个对象并保留每个用户键因为我想避免迭代列表！

最终结果应该是这样的

这里是函数：

_getProviders = () => 
    let currentUser = firebase.auth().currentUser.uid;
    let refVal = firebase.database().ref(`Messages/$currentUser`);
    let providers = ;
    refVal
      .once("value")
      .then(snapshot => 
        snapshot.forEach(child => 
          let providerKeys = child.key;
          Object.assign(providers,  [providerKeys]: child.val() );
        );
      )
      .then(() => 
        let keys = [];
        Object.keys(providers).map(item => 
          keys.push(item);
        );
        keys.forEach(key => 
          firebase
            .database()
            .ref("providers")
            .child(key)
            .once("value")
            .then(providersShot => 
              let username = providersShot.val().username;
              console.log(username);
              providers[key]["username"] = username;
            );
        );
        // console.log(providers);
        this.setState( providers , () =>
          console.log(this.state.providers) // here is the above object!!
        );
      );
  ;


   <FlatList
          key=Math.random() * 1000
          data=this.state.providers
          contentContainerStyle= flexGrow: 1 
          ListEmptyComponent=this._listEmptyComponent()
          extraData=this.state
          renderItem=( item ) => 
            console.log(item);
            return (
              <TouchableOpacity>
                <View style=styles.parent>
                  <Icon name="ios-contact" size=50 color="#4d8dd6" />
                  <View style= flex: 1, alignSelf: "flex-start" >
                    <Text
                      style=
                        color: "#000",
                        fontSize: 17,
                        marginHorizontal: 25,
                        alignSelf: "stretch"
                      
                    >
                      item.username
                    </Text>
                    <Text
                      style=
                        color: "#a1a1a1",
                        marginHorizontal: 35,
                        marginVertical: 5,
                        alignSelf: "stretch"
                      
                      numberOfLines=1
                      lineBreakMode="tail"
                    >
                      item.lastMssg.text
                    </Text>
                  </View>
                  <Icon name="ios-time" size=20 color="#ddd" />
                </View>
              </TouchableOpacity>
            );
          
          keyExtractor=(item, index) => index.toString()
        />

【参考方案1】：

您可以做的一件事是，当您获取整个数据时，尝试在一个单独的列表中对其进行排序并将其传递给 state 和 flatlist data=this.state.sortedArrar，而不是传递那个庞大的列表。