react-native - React Native Firestore 集合不呈现平面列表

Question

所以基本上我成功地从 Firestore 中检索了一个集合，并且成功地将它放在一个数组中，但它没有显示在屏幕上，问题是我会说我在 renderPost 函数中写参数帖子的位置。请帮助我，我猜这应该很容易，这是我的代码：

<!-- language-all: lang-js -->
import Fire, { getPosts } from "../Fire";
import firebase, { database } from "firebase";
require("firebase/firestore");

export default class HomeScreen extends React.PureComponent {
  
  constructor(props) {
    super(props);

  }
  state = {
    loading: false,
    limit: 2,
    post: [],
    user: {},
  };

  onPostsReceived = (post) => {
    this.setState({ post: post });
    console.log(this.state.post);   //it DOES return an array full of objects of collection
  };

  componentDidMount() {
    getPosts(this.onPostsReceived);
    //console.log(this.state.post);   //returns empty array
  }


  renderPost = (post) => {
    return (
      <View style={styles.feedItem}>
        <Image
          source={
            this.state.user.avatar
              ? { uri: this.state.user.avatar }
              : require("../assets/tempAvatar.jpg")
          }
          style={styles.avatar}
        />
        <View style={{ flex: 1 }}>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <View>
              {/* <Text>{console.log(this.state.post)}</Text> */}
              <Text style={styles.name}>{}</Text>
              <Text style={styles.timestamp}>
                {moment(post.timestamp).toDate().toDateString()}
              </Text>
            </View>

            <Ionicons name="ios-more" size={24} color="#73788B" />
          </View>
          <Text style={styles.post}>{post.text}</Text>
          <Image
            source={post.image && { uri: post.image }}
            style={styles.postImage}
            resizeMode="cover"
          />
          <View style={{ flexDirection: "row" }}>
            <Ionicons
              name="ios-heart-empty"
              size={24}
              color="#73788B"
              style={{ marginRight: 16 }}
            />
            <Ionicons name="ios-chatboxes" size={24} color="#73788B" />
          </View>
        </View>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          translucent
          backgroundColor="white"
          barStyle="dark-content"
        />
        <ClassicHeader
          headerTitle="Eleph"
          leftComponent={
            <TouchableOpacity
              style={{ marginRight: 0, margin: 10 }}
              onPress={() =>
                this.props.navigation.dispatch(DrawerActions.openDrawer())
              }
            >
              <FontAwesome5 name="bars" size={24} color="#161924" />
            </TouchableOpacity>
          }
          rightComponent={
            <TouchableOpacity
              style={{ marginLeft: 0, margin: 10 }}
              onPress={() => this.props.navigation.navigate("Message")}
            >
              <Ionicons name="ios-chatboxes" size={24} color="#73788B" />
            </TouchableOpacity>
          }
        />
        <FlatList
          style={styles.feed}
          data={this.state.post}
          //extraData={this.state}
          renderItem={({ item, index }) => {
            this.renderPost(item);
          }}
          keyExtractor={(item, index) => String(index)}
          //ItemSeparatorComponent={this.renderSeparator}
          ListFooterComponent={this.renderFooter}
          ListHeaderComponent={this.renderHeader}
          onEndReachedThreshold={0}
          onEndReached={this.retrieveMore}
          showsVerticalScrollIndicator={false}
        ></FlatList>
      </View>
    );
  }
} 

如果我的方法 getPosts from Fire 在这里很重要，那就去：

导出异步函数 getPosts (PostsRetrived) { var post = [];

var snapshot = await firebase.firestore()
  .collection('posts')
  .orderBy('timestamp')
  .get()

snapshot.forEach((doc) => {
  const PostItem = doc.data();
  PostItem.id = doc.id;
  post.push(PostItem);
});
PostsRetreived(post);

}

Fire.shared = new Fire(); 导出默认火；

标签： react-nativegoogle-cloud-firestoreexporeact-native-flatlist

Answer 1

Omfg ...这就是我经常讨厌编程的原因。我为此损失了一个星期，错误是这样的：

renderItem={({ item, index }) => {
            this.renderPost(item);
          }}

should be renderItem={({ item, index }) => 
            this.renderPost(item);
          }

是的，我只需要删除一个花括号，没有任何地方指出这是有问题的 omg。无论如何，是的，再见