Реагировать - Компонент не обновляется после повторного рендеринга - PullRequest
2 голосов
/ 20 сентября 2019

После повторного рендеринга один из моих компонентов не обновляется.Это происходит только изредка.

Я проверил, правильно ли отображается компонент.В приведенном ниже коде вы увидите console.log в функции render.Я понял, что значение меняется правильно.Но сам компонент не обновляется визуально.Я не думаю, что я мутирую какие-либо состояния / реквизиты.Я использую Redux для большинства состояний управления.Вы знаете, почему это может произойти?Спасибо.

Дочерний компонент выглядит следующим образом:

export default ChildComponent extends React.Component {
   ...

   render() {
      ...
      const barWidth = this.getProgressWidth(boundingClientRect) // also uses this.props.editorTimestamp
      console.log(barWidth) // This value is updated like I expect

      return (
         <div>
            ...
            <div style={{...styles.barStyles, width: barWidth }}>
            ...
         </div>
      )
   }
}

Родительский компонент выглядит следующим образом:

export default ParentComponent extends React.Component {
   ...

   render() {
      ...
      const singleEditorTimestamp = this.getEditorTimestamp(id) // gets the timestamp from timestamps obj

      return (
         <div>
            ...
            <ChildComponent editorTimestamp={singleEditorTimestamp} />
            ...
         </div>
      )
   }
}

1 Ответ

0 голосов
/ 20 сентября 2019

Изменения state или props могут вызвать рендеринг.Также this.forceUpdate();

Вы можете сделать как

 const barWidth = this.getProgressWidth(boundingClientRect)
 this.setState({barWidth: barWidth});

Но изменение состояния внутри рендера не очень хорошая идея.Потому что это вызовет бесконечный процесс рендеринга.Вы должны объявить один event и изменить state в этом случае.:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...