獲取數組 object 但無法訪問其中的元素

Question

我試圖獲取用戶關注的所有人員的帖子，但我得到了一個對象數組，但我無法訪問其中的對象。 這是我的代碼：

初始化狀態：

const [following, setFollowing] = useState([]);
const [allPosts, setAllPosts] = useState([]);

創建集合引用並獲取數據，此數據是用戶關注的人的 ID ：

const followingColRef = collection(db, "users", uid, "following");

  useEffect(() => {
    onSnapshot(followingColRef, (snapshot) => {
      setFollowing(
        snapshot.docs.map((item) => ({ ...item.data(), id: item.id }))
      );
    });
  }, []);

然后我在這里嘗試獲取上面創建的數組中每個用戶 ID 發布的所有帖子（以下）：

useEffect(() => {
    const array = [];
    following.map((user) => {
      const postsColRef = collection(db, "users", user.id, "posts");

      onSnapshot(postsColRef, (snapshot) => {
        array.push(
          snapshot.docs.map((item) => ({ ...item.data(), id: item.id }))
        );
      });
    });
    setAllPosts(array);
  }, [following]);
  console.log(allPosts);

當我打開登錄到控制台的數據時，它會是這樣的：

[
    [
        {
            "likes": 2,
            "user": "Some Name",
            "comments": 1,
            "body": "Somthing...",
            "uid": "cU1h2uh5CTMGKEKD4Wa986YUDqp1",
            "created_at": {
                "seconds": 1664450450,
                "nanoseconds": 779000000
            },
            "id": "Z7OcjSIY8OYKpbC1pdyq"
        }
    ]
]

但是如果我嘗試訪問allposts[0]我會得到 undefined

那么為什么會發生這種情況以及如何刪除頂層陣列因為它沒有做任何重要的事情

任何幫助都會非常感謝

Answer 1

可能是因為allPosts[0]在您嘗試訪問它時未定義。

您可以嘗試兩種方法來實現您想要的

要刪除外部數組，您可以嘗試像這樣設置allPosts而不是setAllPosts(array[0])

然后嘗試如下所示的新useEffect來解決返回的未定義問題。

useEffect(() => {
console.log(allPosts[0])
}, [allPosts]);

或者，您可以通過執行此操作來移除外部數組並訪問一個 go 中的數據，而不是上面的所有內容

useEffect(() => {
setAllPosts(prevPost => prevPost[0]);
console.log(allPosts[0])
}, [allPosts]);