如何在 React Native Expo 中打印出我的对象数组？

Question

如何打印我在控制台中看到的值？我需要在我使用 Expo 在 React Native 中运行的应用程序中显示它们。我是否需要映射对象数组并打印出值，或者因为 MyProfile 是异步的而以不同的方式运行它？

谢谢！

import { useNavigation } from "@react-navigation/core";
import React, { useEffect, useState } from "react";
import firebase from "firebase/app";
import "firebase/firestore";
import { auth } from "../firebase";
import {
  Text,
  View,
  StyleSheet,
  Image,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
} from "react-native";
import { Animate } from "react-native-entrance-animation";
import Copyright from "./Copyright";

const ProfileScreen = () => {
  const navigation = useNavigation();

  const MyProfile = () => {
    const [posts, setPosts] = useState(null);
    let myPosts = "Profile loading...";

    const collectIdsAndDocs = (doc) => {
      return { id: doc.id, ...doc.data() };
    };

    useEffect(() => {
      const getPost = async () => {
        const snapshot = await firebase
          .firestore()
          .collection("profiles")
          .where("email", "==", auth.currentUser.email)
          .get();
        myPosts = snapshot.docs.map(collectIdsAndDocs);
        console.log(myPosts);
        setPosts({ myPosts });
      };
      getPost();
    }, []);
    return (
      <View>
        <Text>{/*how do I print out values here!? I see them in console*/}</Text>
      </View>
    );
  };

Answer 1

既然你已经调用了setPostsuseState钩子，你可以在你的渲染代码中访问posts：

return (
  <View>
     {posts.map((post) => (
       <Text>{post.id}</Text>
     ))}
  </View>
);

---

要解决null问题，在定义状态时传入一个空数组作为初始值：

const [posts, setPosts] = useState([]);