React JS - Tick Callback с передачей аргумента объекта

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

Результат

Как я могу передать свой объект dendoLabel этой функции?

Answer 1

Попробуйте использовать функцию стрелки () => {} вместо function() {}.

Вы можете узнать больше о разнице между ними здесь .

Answer 2

Следующий код «работает», потому что dendoLabels не передается обратному вызову, когда он вызывается, и вместо него используется значение по умолчанию.

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

Проблема в том, что переменная dendoLabels в жизнивнутри области диаграммыExample3.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"
  }]
}