组件未在反应 js 中呈现答案

【问题标题】：Component is not rendering in react js组件未在反应 js 中呈现
【发布时间】：2021-12-03 06:48:17
【问题描述】：

为什么这个组件没有在 react js 中渲染。它显示错误消息未处理的运行时错误错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

这是我的组件

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

【问题讨论】：

别忘了someone answers时你能做什么。干杯。

标签： javascript reactjs

【解决方案1】：

return (
{RenderPage}
)

更改返回语句。因为它是一个变量而不是一个组件。

【讨论】：

【解决方案2】：

RenderPage 不是一个有效的 React 组件，如果 fetchComment 是未定义/错误的，它要么是错误的，要么是一个 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;
}

【讨论】：

【解决方案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}
 )

}

【讨论】：

感谢一切正常。早上我尝试了相同的过程，但没有成功。我想我忘了保存。