如果數據中只有一個對象，則平面列表不呈現？

Question

我對Flatlist有一些問題，我從DB獲得了一系列對象，

並將它們保存到狀態，現在當我在render（）方法或setState之后的回調函數中記錄this.state.providers ，我得到了這樣的有效Object

[{username: "Test", key: "53HoDga6aYhHsV5pCi5sx6LGbx42"}]

但是當我將這些對象傳遞到<Flatlist data={this.state.providers} />的<Flatlist data={this.state.providers} /> ，flatlist無法呈現！

但是當我像這樣在數據道具手冊中添加對象時

<Flatlist data={[{username: "Test One", key: "53HoDga6aYhHsV5pCi5sx6LGbx42"}]}

列表工作很好，但是我確定代碼是正確的，因為我將它們添加到了其他項目中並且運行良好！

編輯

當我將兩個對象傳遞到數組中時，平面工作！

因此，如果我從數據庫獲得一個對象，該如何處理！

碼

import React, { Component } from "react";
import firebase from "react-native-firebase";
import Icon from "react-native-vector-icons/Ionicons";

import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Dimensions
} from "react-native";

class ListChats extends Component {
  constructor(props) {
    super(props);
    this.state = {
      providers: []
    };
  }
  _chatList = () => {
    let currentUser = firebase.auth().currentUser.uid;
    let ref = firebase.database().ref(`Messages/${currentUser}`);
    let providersKeys = [];

    ref.once("value").then(snapshot => {
      snapshot.forEach(childsnap => {
        console.log(childsnap.key);
        providersKeys.push(childsnap.key);
      });
      let usernames = [];
      providersKeys.forEach(key => {
        firebase
          .database()
          .ref("users")
          .child(key)
          .once("value")
          .then(providersShot => {
            let username = providersShot.val().username;
            usernames.push({ username: username, key: key });
          });
      });
      this.setState({ providers: usernames }, () =>
        console.log(this.state.providers)
      );
    });
  };
  componentDidMount() {
    this._chatList();
  }
  _listEmptyComponent = () => {
    return (
      <View style={styles.container}>
        <Text style={{ alignSelf: "center" }}>No Chats Found :O</Text>
      </View>
    );
  };

  render() {
    console.log(this.state.providers); // I got [{username: "Test", key: "53HoDga6aYhHsV5pCi5sx6LGbx42"}]
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          key={Math.random() * 1000}
          data={this.state.providers}
          contentContainerStyle={{ flexGrow: 1 }}
          ListEmptyComponent={this._listEmptyComponent()}
          keyExtractor={item => item.key.toString()}
          renderItem={({ item }) => {
            console.log("item", item);
            return (
              <TouchableOpacity
                onPress={() =>
                  this.props.navigation.navigate("ChatDetails", {
                    Key: item.key,
                    providerName: item.username
                  })
                }
              >
                <View style={styles.parent}>
                  <Icon name="ios-contact" size={50} color="#4d8dd6" />
                  <View
                    style={{
                      flex: 1,
                      justifyContent: "flex-start",
                      alignItems: "flex-start",
                      marginHorizontal: 25
                    }}
                  >
                    <Text
                      style={{
                        color: "#000",
                        fontSize: 17
                      }}
                    >
                      {item.username}
                    </Text>
                  </View>
                  <Icon name="ios-chatboxes" size={25} color="#d6d6d6" />
                </View>
              </TouchableOpacity>
            );
          }}
          // keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  parent: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingVertical: 25,
    marginHorizontal: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#eee"
  }
});

export default ListChats;

Answer 1

您應該將extraData屬性添加到FlatList ：

extraData={this.state}

Answer 2

在這里，您使用usernames.push方法將數據對象添加到數組中，即使使用新數組更新狀態，使用此方法也不會指示需要重新渲染的狀態。

對於這種通常的編碼模式，使用擴展運算符

this.setState({ providers: [...usernames] })

Answer 3

使用FlatList的“ extraData”道具。