获取数组 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]);