如果数据中有一个对象，Flatlist 不会呈现？

Question

我对 Flatlist 有一些问题，我有一个从 DB 获取的对象数组，

并将它们保存到状态，现在当我在 render() 方法或 setState 后的回调函数中记录 this.state.providers 时，我得到了这样的有效对象

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

但是当我将这些对象传递给<Flatlist data={this.state.providers} /> 中的数据道具时，平面列表没有呈现！

但是当我像这样在数据道具手册中添加对象时

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

flatlist 工作得很好， 但我确信代码是正确的，因为我将它们添加到其他项目中并且工作得很好！！

编辑

当我将两个对象传递到数组中时，flatlist 工作！！

如果我从数据库中得到一个对象，如何处理它！

代码

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

使用 "extraData" FlatList 的 props。