如何在反应中呈现条件内容答案

【问题标题】：How to render conditional content in react如何在反应中呈现条件内容
【发布时间】：2022-02-08 07:00:59
【问题描述】：

我试图弄清楚如何调整这个boilerplate repo, so that on the index page，我可以为登录用户呈现一个页面，或者为其他任何人呈现另一个页面。样板索引总是呈现相同的页面，但如果存在经过身份验证的用户，则会向其添加额外的位。

目前，当我尝试时：

return (
    <Box>
      <Head>
        <title>title</title>
      </Head>
      <div>
      <Limiter pt={20} minH="calc(100vh - 65px)">
        <Center flexDir="column">
        {!me  &&
            <Box textStyle='h1' mb={8} mt={8} textAlign="center" >
              <HomeLandingPage />
            </Box> 
        } 
        {me && router.replace("/dashboard")}
        
        </Center>
      </Limiter>
      </div>
    </Box>
  )

我在终端中没有收到任何错误，但我在浏览器中收到此错误：

错误：对象作为 React 子对象无效（找到：[object 承诺]）。如果您打算渲染一组孩子，请使用代替数组。

如果我删除第二个条件（即 me 为真），我可以无错误地呈现 HomeLandingPage，但如果 !me 为假，我只会得到一个空页面。如果我删除 !me 条件并尝试呈现登录的用户页面，则情况并非如此。当我尝试同时使用这两种方法时，我得到了同样的错误。

我不知道在哪里放置一个数组来处理这个问题。一些关于此错误的帖子通过将所有内容放在 div 标签中解决了他们的问题。我正在使用 ChakraUI，它将一个 div 称为我正在使用的 Box，但我尝试在主页的每个级别添加额外的 div 以尝试找到一个有效的版本 - 没有。

我试图依靠成功的身份验证处理程序上的登录重定向，它有：

  const onSubmit = (data: LoginInput) => {
    return form.handler(() => login({ variables: { data } }), {
      onSuccess: async (data) => {
        await fetch("/api/login", {
          method: "post",
          body: JSON.stringify({ [LOGIN_TOKEN_KEY]: data.login.token }),
        })
        client.writeQuery<MeQuery>({ query: MeDocument, data: { me: data.login.user } })
        router.replace(redirect || "/dashboard")
        // router.replace('/dashboard')
        // router.replace('/profile/index')
        // console.log(redirect, REDIRECT_PATH)
        
      },
    })
  }

我希望这个处理程序在成功登录时重定向到 /dashboard - 但它没有。

如果我从 index.tsx 页面中删除 me 处理程序，我在进行身份验证时只会得到一个空页面页面，然后我可以将 /dashboard 添加到浏览器 url 以导航到我试图重定向到的页面认证成功。

我解决这个问题的第一行就是为什么如果我是真的，我不能在主页中进行重定向。

是否有任何线索可以启发我下一步的研究方向？

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

您正在尝试呈现一个返回承诺的函数。相反，将它放在渲染代码之外，以便它可以将您重定向到所需的位置。一旦重定向，您的路由将负责呈现仪表板组件。

if (me) {
  router.replace("/dashboard");
  return <LoadingSpinner />; // or some indication that we're redirecting
}

// this will only be rendered for a guest user
return (
  <Box>
    <Head>
      <title>title</title>
    </Head>
    <div>
    <Limiter pt={20} minH="calc(100vh - 65px)">
      <Center flexDir="column">
        <Box textStyle='h1' mb={8} mt={8} textAlign="center" >
          <HomeLandingPage />
        </Box>      
      </Center>
    </Limiter>
    </div>
  </Box>
)

【讨论】：

非常感谢