未捕获的类型错误:无法读取 React 中未定义的属性“showBarChart" [英] Uncaught TypeError: Cannot read property 'showBarChart' of undefined in React

问题描述

我有一个函数可以自定义 nvd3 scatterChart 图的工具提示.在我想更新状态的函数中，我调用了另一个执行 setState 的函数:

chart.tooltip.contentGenerator(function (d) {var html = "
";d.series.forEach(function(elem){Object.keys(data_obj).forEach(function(key_1) {var external_obj = data_obj[key_1];if (outer_obj["key"] === elem.key) {//这个函数更新状态this.showBarChart(elem.key);var expr = external_obj["values"][0]["expr"];html += "
"+ elem.key + "</p>";html += "<p>x = " + d.value + ", y = " + elem.value + "</p>";}});})html += "</div>";返回html；}).bind(this);

在我的构造函数中:

class ScatterChart 扩展 React.Component {构造函数(道具){超级(道具)；this.createScatterChart = this.createScatterChart.bind(this);this.showBarChart = this.showBarChart.bind(this);this.state = {神经元名称:"}}

和render:

render() {控制台日志(this.state.neuron_name)；返回 
<svg ref={节点=>this.node = node} width={500} height={500}></svg><BarChart 数据 = { expressionDatum.getDatumForNeuron(this.state.neuron_name) }/>
}

如何让 contentGenerator 函数看到 this 对象?

解决方案

我能够通过分配 that = this 然后访问 that 来设置状态:

 var that = this;chart.tooltip.contentGenerator(功能(d){var html = "
";d.series.forEach(function(elem){Object.keys(data_obj).forEach(function(key_1) {var external_obj = data_obj[key_1];if (outer_obj["key"] === elem.key) {that.showBarChart(elem.key);var expr = external_obj["values"][0]["expr"];html += "
"+ elem.key + "</p>";html += "<p>x = " + d.value + ", y = " + elem.value + "</p>";}});})html += "</div>";返回html；});

虽然当 nvd3 像疯了一样打印 tooltips 时会导致一个奇怪的错误，但我可以更新状态.

I have a function that customizes tooltip of nvd3 scatterChart plot. In the function I want to update state, so I am calling another function that does setState:

chart.tooltip.contentGenerator(function (d) {
      var html = "<div>";
      d.series.forEach(function(elem){
        Object.keys(data_obj).forEach(function(key_1) {
          var outer_obj = data_obj[key_1];
          if (outer_obj["key"] === elem.key) {
             // THIS FUNCTION UPDATES STATE
             this.showBarChart(elem.key);

              var expr = outer_obj["values"][0]["expr"];
              html += "<p>" + elem.key + "</p>";
              html += "<p>x = " + d.value + ", y = " + elem.value + "</p>";
          }
        });
      })
      html += "</div>";
      return html;
    }).bind(this);

Inside the constructor I have:

class ScatterChart extends React.Component {
  constructor(props){
  super(props);
  this.createScatterChart = this.createScatterChart.bind(this);
  this.showBarChart = this.showBarChart.bind(this);
  this.state = {
      neuron_name: ""
  }
}

And render:

render() {
console.log(this.state.neuron_name);
  return <div width={500} height={500}>
          <svg ref={node => this.node = node} width={500} height={500}></svg>
          <BarChart datum = { expressionDatum.getDatumForNeuron(this.state.neuron_name) }/>
        </div>
}

How could I make contentGenerator function see this object?

解决方案

I was able to set the state by assigning that = this and then accessing that:

 var that = this;
    chart.tooltip.contentGenerator(function (d) {
      var html = "<div>";
      d.series.forEach(function(elem){
        Object.keys(data_obj).forEach(function(key_1) {
          var outer_obj = data_obj[key_1];
          if (outer_obj["key"] === elem.key) {
              that.showBarChart(elem.key);
              var expr = outer_obj["values"][0]["expr"];
              html += "<p>" + elem.key + "</p>";
              html += "<p>x = " + d.value + ", y = " + elem.value + "</p>";

          }
        });
      })
      html += "</div>";
      return html;
    });

Although it lead to a weird bug when nvd3 prints tooltips like crazy, I can update the state.

这篇关于未捕获的类型错误:无法读取 React 中未定义的属性“showBarChart"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！