从存储中的状态更新后如何更新状态?

时间:2018-09-26 08:28:23

标签: javascript reactjs react-redux

我有一个加载图表的按钮

<li className="pull-right"><a className=" btn btn-default" onClick={this._saveChartDashboard.bind(this)}>Load</a></li>

_saveChartDashboard(){
   let data = {
      dashboardId : this.props.params.dashboardId, 
      chartIds : this.state.selectedChartId,
      userName: "demo"
    }
    DataConnectionAction._addChartToDashboard(data, ()=>{
    DataConnectionAction._dashboardChart({dashboardId: 
    this.props.params.dashboardId});
  });

}

我在_addChartToDashboard函数上有一个回调。最初,我已将一个图表加载到仪表板, 再次将另一个图表加载到仪表板,当再次加载第二个图表时,我得到了3个图表,其中第一个图表gettig重复了。

代替回调,如果我重新加载页面,那么不用重新加载页面就可以了,不用回调,如何使用初始加载的图表进行更新。

在数据连接商店更改中,我正在从商店获取数据

if(type == 'SavedChartDatainDashboard'){
      let data = JSON.parse(JSON.stringify(DataConnectionStore._getData('savedChartinDashboard')));
      let saveLayoutchart = DataConnectionStore._getSaveLayout() || {};
      var layout = this.generateLayout(data.length, saveLayoutchart);
        this.setState({ 
          saveLayoutchart
       });

       this.setState({ 
        savedChartinDashboard: data,
         layout
        }, () => {
          if(data && data[data.length - 1].nextChartId)
            DataConnectionAction._dashboardChart({
              dashboardId: this.props.params.dashboardId,
              chartId: data[data.length - 1].nextChartId,
            });
      });

    }

onLayoutChange我遇到错误

onLayoutChange(layout, dashboardId) {
  let saveLayoutchart = DataConnectionStore._getSaveLayout() || {};
       this.setState({ 
          saveLayoutchart
       });
        var dashObj={};
        dashObj.dashboardId=this.props.params.dashboardId;

        var dashboardLayout={};
        var layoutChartId= saveLayoutchart.responseDto && saveLayoutchart.responseDto.chartIds;


        for(var i=0;i<layout.length;i++)
        {

         dashboardLayout[layoutChartId[i]] = layout[i];
        }
        dashObj.dashboardLayout=dashboardLayout;
        DataConnectionAction._saveLayoutToDashboard(dashObj);

   }

generateLayout功能

generateLayout(chartCount,layoutObj) {

    var layout = [], x, y, i;

    if(layoutObj.responseDto && layoutObj.responseDto.dashboardLayout!=null)
    {
     var keysArr=[];
     Object.keys(layoutObj.responseDto.dashboardLayout)
      .forEach(function eachKey(key) { 
      keysArr.push(key);
     });

    for (i = 0; i <= chartCount - 1; i++) {
      y = Math.ceil(Math.random() * 4) + 1;

      layout[i] = {x:layoutObj && layoutObj.responseDto && layoutObj.responseDto.dashboardLayout[keysArr[i]] && layoutObj.responseDto.dashboardLayout[keysArr[i]].x, y:layoutObj && layoutObj.responseDto && layoutObj.responseDto.dashboardLayout[keysArr[i]] && layoutObj.responseDto.dashboardLayout[keysArr[i]].y, w: layoutObj && layoutObj.responseDto && layoutObj.responseDto.dashboardLayout[keysArr[i]] && layoutObj.responseDto.dashboardLayout[keysArr[i]].w, h: layoutObj && layoutObj.responseDto && layoutObj.responseDto.dashboardLayout[keysArr[i]] && layoutObj.responseDto.dashboardLayout[keysArr[i]].h, minW: 2, maxW: 6, minH:10, maxH: 100, isResizable: true, isDraggable: true, i: i.toString()};
    }
  }
  else
  {
    for (i = 0; i <= chartCount - 1; i++) {
       y = Math.ceil(Math.random() * 4) + 1;

     layout[i] = {x: i * 2 % 12, y: Math.floor(i / 6) * y, w: 2, h: 13, minW: 2, maxW: 6, minH:10, maxH: 100, isResizable: true, isDraggable: true, i: i.toString()};
     }


  }
   return {lg:layout};

}

0 个答案:

没有答案