Блог

 const [posts, setPosts] = useState([]);
 
//At first useEffect, upload all post to posts by setPosts function

// A comment is added and submitted to backend
.then((response) => {
console.log(response.data);
console.log(response.data._id);
for (let i = 0; i < posts.length; i  ) {
  if (posts[i]._id === response.data._id) {
    console.log(posts[i]);
    setPosts({...posts,posts[i].comments:response.data.comments,});  //Find post and revise comments 
                                                                       part.
  }
}
})
  

Это краткое изложение моего кода. Когда я добавляю комментарий, я хочу немедленно увидеть этот комментарий. Но, чтобы увидеть этот новый комментарий, я должен перезагрузить веб-страницу. Когда я отправляю новый комментарий в серверную часть, я могу видеть комментарии целиком. Поэтому я думаю, скопируйте новую часть комментариев в старую часть комментариев с помощью

 setPosts({...posts,posts[i].comments:response.data.comments,});
  

этот код. Но это не сработало…. Пожалуйста, дайте мне знать, какая часть неверна.

Проблема в том, что ваш posts является массивом, а не объектом.

Самый простой способ изменить ваш код, о котором я могу думать, — это обновить часть в if условии, чтобы изменить posts[i] с новым comments

 for (let i = 0; i < posts.length; i  ) {
  if (posts[i]._id === response.data._id) {
    console.log(posts[i]);
    posts[i].comments = response.data.comments;
    setPosts(posts); 
  }
}
  

Мы можем использовать map для предотвращения изменения данных

 setPosts(posts.map(post => {
  if (posts[i]._id !== response.data._id) return post;
  return {...post, comments: response.data.comments};
}))
  

В основном вы хотите добавить комментарий к существующему идентификатору записи. Вам нужно сделать вот так:

 setPosts([
  ...posts,
  posts[i]:{ <- copy all previous data of post[i]
   ...post[i],
   comments:{...copy all previous comment of post[i]
    ...post[i].comments,
    ...response.data.comments
}}]);