Question

我有一个散点图和一个调用mapValtoString的回调函数来定义x轴的刻度值。我需要将dendoLabels传递给该函数，该函数将成为该函数的“ liste”参数。

在下面的代码中，数据和dendolabels为空，以便于阅读。

当我尝试将dendolabels传递给函数时，它将传递未定义的对象。我绝对不明白为什么它无法达到目标。

function mapValtoString(val,liste){

    for (var i = 0; i < Object.keys(liste).length ; i++) {
      if (liste[i]["x"] == val) {
        return liste[i]["label"]
      }

    }
        return val
};


class Dashboard extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
    bigChartData: "data1",
    dendo: [],

 };
};

dendoLabels =  [{x:"5", label:"Test"}]
chartExample3 = {
data: canvas => {
  let datass = []
  console.log(this.dendoLabels)
  for (var i = 0; i < Object.keys(this.state.dendo).length; i++) {
    if (this.state.dendo[i]["Label1"] != "") {this.dendoLabels.push({x:this.state.dendo[i]["x1"], label: this.state.dendo[i]["Label1"]})}        
    if (this.state.dendo[i]["Label2"] != "") {this.dendoLabels.push({x:this.state.dendo[i]["x3"], label: this.state.dendo[i]["Label2"]})}

      datass.push({
        borderColor: "#d048b6",
        borderWidth: 2,
        borderDash: [],
        showLine: true,
        borderDashOffset: 0.0,
        data:[{x: this.state.dendo[i]["x1"],y: this.state.dendo[i]["y1"], index:this.state.dendo[i]["Label1"]},{x: this.state.dendo[i]["x2"],y: this.state.dendo[i]["y2"]}]},

        {
        borderColor: "#d048b6",
        borderWidth: 2,
        borderDash: [],
        showLine: true,
        borderDashOffset: 0.0,
        data:[{x: this.state.dendo[i]["x3"],y: this.state.dendo[i]["y3"]},{x: this.state.dendo[i]["x4"],y: this.state.dendo[i]["y4"]}]},

        {
        borderColor: "#d048b6",
        borderWidth: 2,
        borderDash: [],
        showLine: true,
        borderDashOffset: 0.0,
        data:[{x: this.state.dendo[i]["x2"],y: this.state.dendo[i]["y2"]},{x: this.state.dendo[i]["x3"],y: this.state.dendo[i]["y3"], index:this.state.dendo[i]["Label2"]}]
      })
  }
   return{
    datasets: datass,
  }
},

options: {
  legend: false,
  fontSize: 30,
  color: "#666",
  maintainAspectRatio: false,
  responsive: true,
  scales: {
        xAxes: [{
            ticks: {
                display: true,
                stepSize: 5,
                callback: function(value,index,values){
                      console.log(this.dendoLabels)
                      return mapValtoString(value,this.dendoLabels)
                  },

            }
        }]
    }
}

};

dendoLabels采用下面的代码格式，该代码可以正常工作，您将在下面的图像中找到结果。

ticks: {
 display: true,
 stepSize: 5,
 callback: function(value,index,values, dendoLabels = [{x:"5", label:"It works"}]){
 return mapValtoString(value,dendoLabels)
 },
}

Result

如何将我的dendoLabel对象传递给该函数？

Answer 1

以下代码“有效”，因为dendoLabels在调用时未传递给回调，而是使用默认值。

ticks: {
 display: true,
 stepSize: 5,
 callback: function(value,index,values, dendoLabels = [{x:"5", label:"It works"}]){
 return mapValtoString(value,dendoLabels)
 },
}

问题在于dendoLabels变量位于chartExample3.data（）范围内，并且不在回调的范围之内。解决方案是使用闭包。

首先，从回调的参数中删除dendoLabels。

callback: function(value,index,values)

现在将dendoLabels定义为与chartExample3当前所处范围相同的变量。

喜欢这个。

let dendoLabels = [{x:"5", label:"It works"}]

chartExample3 = {
  data: canvas => {
  let datas = []
  return{
    datasets: datas,
  }
},
options: {
  legend: false,
  fontSize: 30,
  color: "#666",
  maintainAspectRatio: false,
  responsive: true,
  scales: {
        xAxes: [{
            ticks: {
                display: true,
                stepSize: 5,
                callback: function(value,index,values){
                return mapValtoString(value,dendoLabels)
                },
            }
        }]
    }
  }
}

由于新要求而进行编辑。将dendoLabels设置为React组件的属性。

如果要使用this.dendoLabels，则必须将其添加为该类的属性，并且必须确保在正确的上下文中调用该回调。从代码中还不清楚您发布了什么是类，什么不属于类以及如何调用回调。

class Dashboard extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      bigChartData: "data1"
      , dendo: []
    }
  }

  dendoLabels = [{
    x: "5"
    , label: "Test"
  }]
}

Answer 2

尝试使用箭头功能function() {}而非{{1}}。

您可以详细了解它们here之间的区别。

React JS-Tick回调传递对象参数

2 个答案: