Question

当React中的一个组件改变另一个组件时，我遇到了一个非常奇怪的错误，即使我希望它们彼此完全隔离。所以，我在父母中有三个组件，我为他们提供了不同的道具：

     <Tabs defaultActiveKey={1} id="cluster-tabs">
        <Tab eventKey={1} title="cells">
          <ClustersMultiChart type="cells" datum = {this.props.mainData} allGenesData={this.props.allGenesData}
            datasetName = {this.props.datasetName} page = {this.props.page} pageNames = {this.props.pageNames}/>
        </Tab>
        <Tab eventKey={2} title="genes">
          <ClustersMultiChart type="genes" datum = {this.props.mainData} allGenesData={this.props.allGenesData}
            datasetName = {this.props.datasetName} page = {this.props.page} pageNames = {this.props.pageNames}/>
        </Tab>
        <Tab eventKey={3} title="reverse">
          <ClustersMultiChart type="reverse" datum = {this.props.mainData} allGenesData={this.props.allGenesData}
            datasetName = {this.props.datasetName} page = {this.props.page} pageNames = {this.props.pageNames}/>
        </Tab>
      </Tabs>

ClustersMultiChart可以是3种不同类型之一：cells，genes或reverse。该错误发生在reverse类型中。首先，我通过axios向服务器请求获取reverse组件的数据。正确的数据来自并且最初使用正确的clusterData变量更新状态，该变量是一个数组。然后DOM开始更新，在此期间clusterData数组被更改，即使（！）也没有调用组件本身的其他方法。以下是axios请求：

handleSearch = () => {
if (!this.state.loading) {
  this.setState({
    loading: true
  });
  let url = '/cluster?datasetName=' + this.props.datasetName;
  url = url + '&geneNames=' + this.state.selectedGeneNames.join(",");
  let that = this;
  axios.get(url).then((response) => {
    const clusterData = response["data"]["clusterData"];
    if (that.state.maxVal > 0) {
      that.fixMax()
    }
    that.setState({
      clusterData: that.state.clusterData.concat(clusterData),
      loading: false,
      allAddedGenes: that.state.allAddedGenes.concat(that.state.selectedGeneNames),
      selectedGeneNames: []
    });
 });
} else {
 alert("Wait! It is loading.");
}
}

所以，我几乎在每个方法中设置断点，我看到第一个clusterData拥有正确的数据，但是，在每个DOM更新另一个组件的代码时，数组已添加到clusterData：

<div className={this.props.type === "cells" ||
      (this.props.type === "genes" && this.state.clusterData.length) ? "" : "hiddenDiv"}>
    {
    this.props.datum.map((clusterObj, idx) => {
      return <div>
        <Col xs={4} md={4} style={{textAlign: "center"}}>
          <Well>
            <Label bsStyle="primary">Cluster {idx + 1}</Label>
              <div className={!this.state.loading && (this.props.type === "cells" ||
                this.props.type === "genes" && this.state.clusterData.length) ? "" : "hiddenDiv"}>
                <BarChart type = "cluster" cluster = {this.props.datasetName + "_" + (+idx + +1)} width = {300} height = {100}
                  datasetName = {this.props.datasetName} dataArr = {this.getDataForBarChart(idx)} maxVal = {this.state.maxVal}/>
              </div>
          </Well>
          </Col>
      </div>
 })

您可以在上方看到map()功能。自从handleSearch state更改后，DOM的此部分会更新，并且this.getDataForBarChart(idx)会在每次map()次迭代时调用this.getDataForBarChart(idx)。在clusterData函数中创建断点我发现在调用之间Private Function getCheckedRecordsFromDB(ByVal cmNum As String) As Boolean Dim rs As Recordset Dim rsFiltered As Recordset Dim iSeral As Integer 'Gets different fields from different tables and store them into rs Set rs = CurrentDb.OpenRecordset("QueryMemoOutFrm") ' Its not working during the filtering, keeps returning nothing found rs.Filter = "Doctype='Outgoing' AND DocumentRef='" & cmNum & "'" Set rsFiltered = rs.OpenRecordset Do While Not rsFiltered.EOF ' Do Something Loop rs.Close Set rs = Nothing rsFiltered.Close Set rsFiltered = Nothing End Function从字面上无处获取新数据。我不知道如何追踪它。任何建议都将不胜感激。

Answer 1

好的，我刚刚发现asyncSpawn("node", ["server.js", "--param1"]) .then(() => console.log("DONE")) .catch(err => console.error(err));更新期间的this.getDataForBarChart(idx)正在这样做。我通过检查组件的DOM来修复它：

type

具有不同道具的两个组件在React中相互改变

1 个答案: