Estoy tratando de enviar objetos a una matriz ("respuestas") presente dentro de un objeto (newProjObj.comments).
Y mientras registro todo el objeto ( newProjObj.comments ), obtengo una matriz vacía como el valor de la propiedad ( newProjObj.comments.replies: [] )
Pero al registrar esa propiedad específica console.log(newProjObj.comments.replies) ), obtengo el resultado deseado ( [{...},{...}] )
export function structureCommentsWithReplies(projectDetails) { console.log(projectDetails) let newProjObj = {...projectDetails}; console.log(newProjObj) // Filtering the actual comments let commsOnPost = newProjObj.comments.filter((comment) => comment.onPost); // Filtering replies to the comments above let commsOnComm = newProjObj.comments.filter((comment) => !comment.onPost); // Looping to the actual comments for(let [index, comment] of commsOnPost.entries()) { // Created a property "replies" for every comment initialised to [] commsOnPost[index]["replies"] = [] // Looping through filtered replies for(let reply of commsOnComm) { if((!reply.onPost) && (reply.commentOnID === comment.id)) { // Push the reply into "replies" property of appropriate actual comment commsOnPost[index]["replies"].push(reply) console.log(commsOnPost[index]['replies']) // Logs the pushed reply as expected => [{ id:17, onPost:false, ... }] console.log(commsOnPost[index]) // Logs the comment object with replies property as EMPTY ARRAY => { id: 1, onPost: true, replies: [], ... } } } } newProjObj.comments = commsOnPost; console.log(newProjObj.comments[0]) // Logs the comment object with replies property as EMPTY ARRAY => { id: 1, onPost: true, replies: [], ... } console.log(newProjObj.comments[0].replies) // Logs the pushed reply as expected => [{ id:17, onPost:false, ... }] return newProjObj; }Y el objeto que se devuelve al final también tiene una matriz vacía como valor de la propiedad "respuestas".
También he escrito comentarios explicando cada línea si eso ayuda.
¡Gracias!
Si entiendo correctamente, entonces tienes un objeto (algo) como este:
const projectDetails = { comments: [ { id: 1, onPost: true, }, { id: 2, onPost: false, commentOnID: 1, }, { id: 3, onPost: false, commentOnID: 1, }, { id: 4, onPost: true, }, { id: 5, onPost: false, commentOnID: 4, }, ] }y te gustaría obtener algo como esto:
const newProjObj = { comments: [ { id: 1, onPost: true, replies: [ { id: 2, onPost: false, commentOnID: 1, }, { id: 3, onPost: false, commentOnID: 1, }, ], }, { id: 4, onPost: true, replies: [ { id: 5, onPost: false, commentOnID: 4, }, ], }, ] }Si esto es correcto, entonces el siguiente fragmento funcionaría:
const projectDetails = { comments: [{ id: 1, onPost: true, }, { id: 2, onPost: false, commentOnID: 1, }, { id: 3, onPost: false, commentOnID: 1, }, { id: 4, onPost: true, }, { id: 5, onPost: false, commentOnID: 4, }, ] } // only taking out the value that we'll be working with const structureCommentsWithReplies = ({ comments, ...details }) => { // classifying items - in one pass & // retrieving the two objects we need const { commsOnPost, commsOnComm } = comments.reduce( (a, { onPost, ...rest }) => { if (onPost) { a.commsOnPost[rest.id] = { onPost, replies: [], ...rest } } else { a.commsOnComm = [...a.commsOnComm, { onPost, ...rest }] } return a }, { commsOnPost: {}, commsOnComm: [] }) // adding items to their parent comments' // replies array commsOnComm.forEach(({ commentOnID, ...rest }) => { commsOnPost[commentOnID].replies = [ ...commsOnPost[commentOnID].replies, { commentOnID, ...rest } ] }) // returning the object with updated // comments section return { ...details, comments: Object.values(commsOnPost) } } const structured = structureCommentsWithReplies(projectDetails) console.log('structured', structured)Este problema viene con la actualización del estado. Si desea acceder a él después de la actualización, use useEffect y adjunte las nuevas publicaciones a un estado para que pueda agregarlo a la matriz de dependencias. Si desea ejecutar algo directamente, simplemente use la nueva variable en sí