Por qué este componente no se representa en reaccionar js. Muestra el mensaje de error Error de tiempo de ejecución no controlado: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: objeto. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado imports por defecto y con nombre .
este es mi componente
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> ) }return ( {RenderPage} )cambiar la declaración de devolución. ya que es una variable no un componente.
RenderPage no es un componente React válido, es falso si fetchComment no está definido/falso, o es una matriz de JSX. Simplemente devuelva el valor de RenderPage calculado. Sugiero también des-PascalCasing la variable para aliviar cualquier confusión de lectura futura, convertir de nuevo a camelCase. Y para cubrir el caso en el que no está devolviendo una matriz, devuelva condicionalmente null para una devolución JSX válida del componente de Test .
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; }Usar
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} )}