组件未在反应 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}
 )

}