Question

感觉非常奇怪，但我在我的应用程序中创建了一个新的React组件，其方式完全类似于我之前使用其他组件的方式，它根本就没有更新。根本没有调用组件的生命周期方法。

我有最顶层的ControlledTabs组件呈现SingleDatasetDashboard，它看起来如下：

class SingleDatasetDashboard extends React.Component {

constructor(props){
  super(props);

}

render() {
return (
<div>
    {
      this.props.page === this.props.pageNames[1] ?
      <div>
        <MarkerGenesChart mainData={this.props.mainData} clusterIds={this.props.clusterIds} page = {this.props.page}
          allGenesData={this.props.allGenesData} datasetName = {this.props.datasetName} pageNames = {this.props.pageNames}/>
      </div>
      : ""
    }
    {
      this.props.page === this.props.pageNames[2] ?
      <div>
        <ClustersMultiChart mainData = {this.props.mainData} datasetName = {this.props.datasetName}
          page = {this.props.page} pageNames = {this.props.pageNames}/>
      </div>
      : ""
    }
    <div style={{visibility: this.props.page === this.props.pageNames[0] ? 'visible' : 'hidden' }}>
      <ScatterChart key="main" datum = {this.props.mainData} type = "main" datasetName = {this.props.datasetName}
        page = {this.props.page} pageNames = {this.props.pageNames}/>
    </div>
</div>)
}
}

module.exports = SingleDatasetDashboard;

此处MarkerGenesChart及其子ScatterChart渲染得非常好。最底层的另一个ScatterChart也可以渲染得很好。在ClustersMultiChart内，我有以下代码：

import React from 'react';
import Col from 'react-bootstrap/lib/Col';
import Row from 'react-bootstrap/lib/Row';
import ScatterChart from './ScatterChart';

class ClustersMultiChart extends React.Component {

constructor(props){
    super(props);

 }

 render() {
   return (
  this.props.mainData.map((clusterObj, idx) => {
      return <Col xs={4} md={4} key={"cluster" + idx + "chart"} >
        Hello! I am No {idx}
        <ScatterChart datum = {this.props.mainData}
          type = "cluster" datasetName = {this.props.datasetName}
          page = {this.props.page} pageNames = {this.props.pageNames}/>
    </Col>
      })
  )
  }
}

 module.exports = ClustersMultiChart;

ScatterChart中还有一个孩子MarkerGenesChart。但是，问题出现了：ScatterChart只生成单个svg标记，并且根本不会更新。它的render()有：

       <Col xs={5} md={5}>
                  <svg ref={node => this.node = node} width={1000} height={1000}></svg>
       </Col>

任何建议都将不胜感激。

更新

如果我从{ this.props.page === this.props.pageNames[2] ?移除SingleDatasetDashboard，则会完美渲染。但是，我需要以某种方式将其保留在那里，并且出于某种原因，它适用于MarkerGenesChart。我检查了页面是否正确切换了。

更新

这绝对与ScatterChart组件无关。完全从ClustersMultiChart删除它并不能解决其中没有更新的问题。有趣的是，render()被调用，但没有别的。主数据对象datum也被传递，因为我可以迭代它。

更新

切换页面后在最顶层组件中调用setState()会触发ClustersMutltiChart的生命周期方法。以下是我触发页面更改的方法，超时功能通过在一段时间后调用setState()来解决问题：

showNextPage = (pageNum) => {
const pageIdx = pageNum - 1;
const page = pageNames[pageIdx];
  this.setState({
    page: page
  });
  setTimeout(function() { //Start the timer
    this.setState({
      datasetName: this.state.datasetName
    })
  }.bind(this), 3000);
 }

显然，我希望在一段时间后没有这种强制更新的情况下发生这种情况。只是在没有this.forceUpdate()的情况下致电setTimeout并不能解决问题。

Answer 1

最后，我让它以可接受的方式工作。只需在this.forceUpdate()的{{1}}中调用componentDidMount即可使其发挥作用：

ClustersMutltiChart：

ClustersMutltiChart.jsx

React组件永远不会更新

1 个答案: