代码之家 › 专栏 › 技术社区 › Mel

如何在react中呈现条件内容

next.js reactjs javascript

Mel · 技术社区 · 4 年前

我正在想办法解决这个问题 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>
  )

我在终端中没有收到错误,但在浏览器中收到此错误:

错误:对象作为子对象无效(找到:[对象] 答应我。如果要渲染子对象集合,请使用而不是数组。

如果我删除第二个条件(即me为true),我可以呈现HomeLandingPage而不会出错,但如果!我是假的。如果我删除了!然后尝试呈现登录的用户页面。当我尝试使用这两个选项时,我会得到相同的错误。

我不知道该把数组放在哪里来处理这个问题。一些关于这个错误的帖子通过将所有内容放在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,但事实并非如此。

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

我解决这个问题的第一个问题是,如果我是真的,为什么我不能在主页上重定向。

有什么线索可以启发我下一步的研究方向吗?

1 回复 | 直到 4 年前

szaman 4 年前

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

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>
)