Question

重新渲染后，我的组件之一未更新。我只会偶尔发生。

我检查了组件是否正确渲染。在下面的代码中，您将在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>
      )
   }
}

Answer 1

<#list list2 as d> <#if list1?seq_contains(d)> ${d?string('MM/dd/yyyy')} </#if> </#list>或state的更改可以触发渲染。也是props

你可以喜欢

this.forceUpdate();

但是在render里面改变状态并不是一个好主意。因为它将触发无限的渲染过程。您应该声明一个const barWidth = this.getProgressWidth(boundingClientRect) this.setState({barWidth: barWidth});并在这种情况下更改event。：）

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

1 个答案: