React Native Firestore Collection не отображает плоский список - PullRequest
Новая
       94

React Native Firestore Collection не отображает плоский список

0 голосов
/ 20 июня 2020

Итак, в основном я успешно извлекаю коллекцию из Firestore, и я помещаю ее в массив, но она не отображается на экране, проблема в том, что я бы сказал, где я написал сообщение paramater внутри моей функции 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 из Fire важен, вот оно:

export asyn c function getPosts (PostsRetreived) {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 (); экспорт по умолчанию Fire;

1 Ответ

0 голосов
/ 20 июня 2020

Omfg ... вот почему я часто ненавижу программирование. Я потерял неделю из-за этого, и ошибка была такой: 

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

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

да, мне просто пришлось удалить одну фигурную скобку, нигде ничего не указывало на эту проблему c omg. в любом случае да пока

...