Estoy tratando de mapear los comentarios de los padres y luego, dentro de la función de mapa, quiero mapear los comentarios secundarios anidados correspondientes que tienen solo un nivel de profundidad.
Por alguna razón, cuando trato de hacer esto, todos los comentarios secundarios anidados se muestran debajo del primer comentario principal.
Tengo dos matrices:
parentComments: [ { id: "1", comment: "First parent comment" }, { id: "2", comment: "Second parent comment" }, ] childComments: [ { id: "3", comment: "First child comment", parentCommentId: "1" }, { id: "4", comment: "Second child comment", parentCommentId: "2" }, ]Aquí está el código que estoy intentando:
{parentComments.map((parentComment) => ( <ul> {parentComment.comment} <li> {" "} {childComments.map((childComment) => ( <> {childComments.find( (e) => e.parent_comment_id === comment.id ) ? childComment.comment : ""} </> ))} </li> </ul> ))}Lo que esperaría que sucediera es que cada comentario principal se mapee, si un comentario secundario parentCommentId es igual a la identificación del comentario principal que se está asignando, mostraría el comentario secundario debajo de él.
Al principio, haga una nueva matriz como esta, luego
let parentComments =[ { id: "1", comment: "First parent comment" }, { id: "2", comment: "Second parent comment" }, ] let childComments= [ { id: "3", comment: "First child comment", parentCommentId: "1" }, { id: "4", comment: "Second child comment", parentCommentId: "2" }, ]; let mapArray =parentComments.map(p => ({ ...p, childComments : childComments.filter(c => c.parentCommentId ==p.id) })); console.log(mapArray); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>entonces puedes probar
{parentComments.map((parentComment) => ( <ul> {parentComment.comment} <li> {" "} {childComments.map((childComment) => ( <> childComment.comment } </> ))} </li> </ul> ))}