組件未在反應 js 中呈現

Question

為什么這個組件沒有在 react js 中呈現。它顯示錯誤消息Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for Composite components) 但得到：object。 您可能忘記從定義組件的文件中導出組件，或者您可能混淆了 default 和命名 imports 。

這是我的組件

function Test({session}) {
    const RenderPage=fetchComment &&(
                fetchComment?.map((comment)=>{
                    return <LoadComment
                    key={i}
                    timestamp={comment.timestamp?.toDate()}
                    comment={comment.comment}
                    image={comment.image}
                    user={comment.user} />
                })
                )
return (
<RenderPage></RenderPage>
)
}

Answer 1

return (
{RenderPage}
)

更改返回語句。 因為它是一個變量而不是一個組件。

Answer 2

RenderPage不是一個有效的 React 組件，如果fetchComment是 undefined/falsey，它要么是假的，要么是一個 JSX 數組。 只需返回計算的RenderPage值。 我還建議取消 PascalCasing 變量以減輕任何未來的閱讀混亂，轉換回 camelCase。 為了涵蓋您不返回數組的情況，有條件地返回null以獲得來自Test組件的有效 JSX 返回。

function Test({session}) {
  const renderPage = fetchComment ? fetchComment.map((comment, i) => {
    return (
      <LoadComment
        key={i}
        timestamp={comment.timestamp?.toDate()}
        comment={comment.comment}
        image={comment.image}
        user={comment.user}
      />
    );
  }) : null;
  return renderPage;
}

Answer 3

利用

export default Test({session}) {
const RenderPage=fetchComment &&(
            fetchComment?.map((comment)=>{
                return <LoadComment
                key={i}
                timestamp={comment.timestamp?.toDate()}
                comment={comment.comment}
                image={comment.image}
                user={comment.user} />
            })
            )
return (
   {RenderPage}
 )

}