React.js не будет правильно отображаться при изменении состояния для вложенных данных

Question

здесь нужна помощь.

Я реализую функцию вложенных комментариев, например, reddit. В основном мои данные в «состоянии» выглядят так:

post: {
  id: 'foo'
  comments: [
    { id: '1', comments: [] },
    { id: '2', comments: [ { id: '3', comments: [...]}, ... ]}
  ]
}

Мой код для отображения данных:

<Row>
  <Col md={12}>
   {post.comments.map((comment, index) => {
     return <Comment
              key={comment.id}
              comment={comment} />
    })}
  </Col>
</Row>

Comment.js:

render() {
    const comment = this.props.comment;
    return (
     <div>
      <Panel className="comment">
        <Panel.Heading className="commentHeader">
          <div>{comment.id}</div>
      </Panel.Heading>
      <Panel.Body>
        <Row>
          <h3>{comment.content}</h3>
          {comment.comments &&
            comment.comments.map((comment, index) => {
              return <Comment key={comment.id} 
                              comment={comment} />;
              })}
        </Row>
        <Row>
          <Button onClick={this.handleReply}> Reply </Button>
        </Row>
      </Panel.Body>
      </Panel>
     </div>
   );
}

Моя проблема в том, что когда я добавляю внешний комментарий в посте, отреагирует нормально:

post: {
  id: 'foo'
  comments: [
    { id: '1', comments: [] },
    { id: '2', comments: [ { id: '3', comments: [...]}, ... ]},
    { id: 're-render works! see another comment', comments: []},
  ]
}

Однако, если новое 'состояние' будет выглядеть примерно так, оно не будет перерисовываться, но если я перезагрузлю страницу, все будет хорошо:

post: {
 id: 'foo',
 comments: [
   { id: '1', comments: [{id: 'not working unless reload page', 
                         comments: []}]},
   { id: '2', comments: [ { id: '3', comments: [...]}, ... ]},
   { id: 're-render works! see another comment', comments: []},
 ]
}

Спасибо за помощь !!!

Answer 1

После обновления данных (существующий, смонтированный) компонент получает новые реквизиты - по умолчанию это (в отличие от изменения состояния) не приводит к повторному отображению.

Предполагая, что данные обновляются и изменяются должным образом (обновляются реквизиты в средствах разработки) ... вы должны использовать shouldComponentUpdate - возвращать true при разнице в prop.comment (достаточно мелкого сравнения) - вот и все.

Answer 2

Я постараюсь предложить вам решение:

Вы пытаетесь добавить подкомменты к комментариям. Так что каждый комментарий должен иметь какой-то идентификатор. Вы нажимаете добавить комментарий (дочерний или вложенный) в некоторый (родительский) комментарий. Затем вы получаете родительский идентификатор и вложенные данные и с помощью некоторой функции handleCommentAdd выполните следующее:

const handleCommentAdd = (id, nestedData) => {
  this.setState(prevState => {
    return {
      ...prevState,
      post: {
        ...prevState.post,
        comments: prevState.post.commments.map(comment => (
          comment.id === id ?
          {
            ...comment,
            comments: comment.comments.concat(nestedData)
          } : comment
        ))
      }
    }
  })
}

Редактировать функцию в соответствии с вашим состоянием.

Если вы не используете функции стрелок и оператор разворота:

const handleCommentAdd = function(id, nestedData) {
  this.setState(function(prevState) {
    return Object.assign(
      {},
      prevState,
      {post: Object.assign(
        {},
        prevState.post,
        {comments: prevState.post.comments.map(function(comment) {
          comment.id === id ?
          Object.assign(
            {},
            comment,
            {comments: comment.comments.concat(nestedData)}
          ) : comment
        })}
      )}
    )
  })
}