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

Question

I have a scatter graph and a callback function calling mapValtoString to define the tick value of the x axis. I need to pass dendoLabels to that function which will be the "liste" argument of the function.

In the code below, datas and dendolabels are empty to make it easier to read.

When I try to pass dendolabels to the function, it pass an undefined object. I absolutely don't understand why it can't reach it.

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 is in the format of the code below which is working by the way, you will find the result in the image below.

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

Result

How can I pass my dendoLabel object to that function ?

Answer 1

The following code "works" because dendoLabels is not passed to the callback when it's invoked and the default value is used instead.

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

The problem is that the dendoLabels variable in living inside the chartExample3.data() scope and out of the callback's reach. The solution is to use a closure.

First, remove the dendoLabels from the callback's arguments.

callback: function(value,index,values)

Now define dendoLabels as a variable in the same scope that chartExample3 currently lives in.

Like this.

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)
                },
            }
        }]
    }
  }
}

EDIT because of new requirement . Setting dendoLabels as a property of React component.

If you want to use this.dendoLabels you must add it as a property of that class and you must assure that the callback is invoked within the right context. It isn't clear from the code that you posted what is and isn't part of the class and how the callback is invoked.

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

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

Answer 2

Try using an arrow function () => {} rather than function() {} .

You can read more on the difference between them here .