React - 重新渲染后組件未更新

Question

重新渲染后，我的一個組件沒有得到更新。 它只是偶爾發生。

我檢查了組件是否正確呈現。 在下面的代碼中，您將在render function 中看到一個console.log 。 我意識到該值正確更改。 但是組件本身不會在視覺上更新。 我不認為我會改變任何狀態/道具。 我使用Redux進行大多數 state 管理。 你知道為什么會這樣嗎？ 謝謝你。

子組件如下所示：

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

Answer 1

state或props更改可以觸發渲染。 還有this.forceUpdate();

你可以這樣做

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

但是在渲染內部更改 state 並不是一個好主意。 因為它會觸發無限渲染過程。 您應該聲明一個event並在該事件中更改state 。 :)