javascript - 如何将对象迭代到平面列表中 - react native ？

Question

我正在用 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()}
        />

Answer 1

你可以做的一件事是，当你获取整个数据时，尝试将其排序在一个单独的列表中，并将其传递到状态和平面列表 data={this.state.sortedArrar} 上，而不是传递那个庞大的列表。