未捕获的类型错误：无法读取 React 中未定义的属性“showBarChart”答案

【问题标题】：Uncaught TypeError: Cannot read property 'showBarChart' of undefined in React未捕获的类型错误：无法读取 React 中未定义的属性“showBarChart”
【发布时间】：2018-06-08 12:07:04
【问题描述】：

我有一个自定义nvd3scatterChart绘图工具提示的功能。在我想更新状态的函数中，我正在调用另一个函数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);

在我的构造函数内部：

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: ""
  }
}

还有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>
}

我怎样才能让contentGenerator 函数看到this 对象？

【问题讨论】：

很难说你想做什么/问什么，但也许这个chart.tooltip.contentGenerator(function (d) {到chart.tooltip.contentGenerator( (d) => {
我试过了，this 仍然是undefined

标签： javascript reactjs nvd3.js

【解决方案1】：

我可以通过分配that = this然后访问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;
    });

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

【讨论】：

我认为您的问题是您将 .bind(this) 放在括号外。应该是 }.bind(this));