React - 仅加载/显示当前用户帖子

Question

我想在 React 中返回，显示每个用户登录时的所有帖子。

问题是现在，我的代码加载所有用户的所有帖子，只显示当前登录用户的帖子，但其他帖子占用屏幕空间。我想删除/不加载未登录的用户帖子。

我认为问题是现在我在 JSX 中进行验证，但我必须在加载帖子的 map() 函数上进行验证，但我自己找不到解决方案。

这是我目前的代码：

  const posts = useSelector((state) => state.posts)
  const classes = useStyles()
  const user = JSON.parse(localStorage.getItem('profile'))

  return (
    <>
      <Grid className={classes.container} container alignItems='stretch' spacing={3}>
        {
          posts.map((post) => (
            <Grid key={post._id} item xs={12} sm={4}>
            {(user?.result?.googleId === post?.creator || user?.result?._id === post?.creator) && (
              <Post post={post} setCurrentId={setCurrentId}/>
            )}
            </Grid>
          ))
        }
      </Grid>
    </>
  )

这是输出示例：

有人可以帮忙吗？非常感谢。

Answer 1

在这里，您正在渲染 Grid，然后检查条件，以便您的 Grid 占用该空间。

你只需要在渲染Grid之前检查你的状态一行

尝试如下：

      {posts.map(
        post =>
          (user?.result?.googleId === post?.creator ||
            user?.result?._id === post?.creator) && (
            <Grid key={post._id} item xs={12} sm={4}>
              <Post post={post} setCurrentId={setCurrentId} />
            </Grid>
          )
      )}