将对象推入数组，该数组是对象的属性

Question

我正在尝试将对象推送到对象 (newProjObj.comments) 中存在的数组（“回复”）。

并且在记录整个对象 (newProjObj.comments) 时，我得到一个空数组作为属性(newProjObj.comments.replies: [])

的值

但是在记录特定的属性(console.log(newProjObj.comments.replies)) 时，我得到了所需的输出 ([{...},{...}])

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

最后返回的对象也有一个空数组作为“回复”的值属性。

如果有帮助的话，我也写了解释每一行的注释。

谢谢！

Answer 1

这个问题出现在状态更新中。如果你想在更新后访问它，使用 useEffect 并将新帖子附加到一个状态，这样你就可以将它添加到 dependencies 数组。如果你想直接运行一些东西，只需使用新变量本身

Answer 2

如果我没理解错的话，你有一个像这样的对象（东西）：

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,
    },
  ]
}

你想要这样的东西：

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,
        },
      ],
    },
  ]
}

如果这是正确的，那么下面的代码片段将起作用：

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)

将对象推入数组，该数组是对象的属性

Pushing object into an array which is a property of an object

javascript

arrays

nested-loops

javascript-objects

reactjs

将对象推入数组，该数组是对象的 属性

Pushing object into an array which is a property of an object

javascript

arrays

nested-loops

javascript-objects

reactjs

将对象推入数组，该数组是对象的属性