如何在反應中呈現條件內容

Question

我想弄清楚如何調整這個樣板回購協議，以便在索引頁面上，我可以為登錄用戶呈現一個頁面，或者為其他任何人呈現另一個頁面。 樣板索引始終呈現相同的頁面，但如果有經過身份驗證的用戶，則會向其添加額外的位。

目前，當我嘗試時：

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 Promise]）。 如果您打算渲染子集合，請改用數組。

如果刪除第二個條件（即 me 為真），我可以無錯誤地呈現 HomeLandingPage，但如果 me 為 false，我只會得到一個空頁面。 如果我刪除 .me 條件並嘗試呈現已登錄的用戶頁面，則情況並非如此。 當我嘗試使用這兩種選擇時，我得到了同樣的錯誤。

我不知道在哪里放置數組來處理這個問題。 一些關於此錯誤的帖子通過將所有內容放入 div 標簽中解決了他們的問題。 我正在使用 ChakraUI，它調用我正在使用的 div a 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 以導航到我在成功驗證時嘗試重定向到的頁面.

我解決這個問題的第一線詢問是為什么如果我是真的，我不能在主頁上進行重定向。

是否有任何線索可以啟發我下一步的研究方向？

Answer 1

您正在嘗試呈現一個返回 promise 的 function。相反，將它放在呈現代碼之外，以便它可以將您重定向到所需的位置。 一旦重定向，您的路由將負責呈現儀表板組件。

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

如何在反應中呈現條件內容

問題描述

1 個解決方案

解決方案1
0 已采納 2022-02-07 23:00:59

如何在反應中呈現條件內容

問題描述

1 個解決方案

解決方案1 0 已采納 2022-02-07 23:00:59

解決方案1
0 已采納 2022-02-07 23:00:59