时间戳

首页 > 解决方案 > React.js - 无法读取未定义的属性，即使上下文已绑定（从子调用父方法）

reactjs - React.js - 无法读取未定义的属性，即使上下文已绑定（从子调用父方法）

问题描述

我正在 React 中构建一个小型应用程序 -Job当在子组件中单击条形图 (ApexCharts) 中的条时，尝试从我的父组件调用一个函数SummaryChart。

自然地，我读到的方法是在 Job 中定义一个名为 的函数getSequenceView，并将其通过一个 prop 传递给 alias 下的 Chart handleBarClick，然后调用this.props.handleBarClickfromSummaryChart在父级中调用它。

父组件

class Job extends Component {
  constructor(props)
  {
    super(props);

    this.state = {
      ...
    }

    this.getSequenceView = this.getSequenceView.bind(this);

  }

  getSequenceView(config, event)
  {
    console.log(config.someData);
    $('#help-modal').modal();
  }

render()
  {
    return (
      
      <SummaryChart
        handleBarClick={this.getSequenceView}
      />

    );
  }

子组件

class SummaryChart extends Component {
  constructor(props) {

    super(props);

    this.state = {
      options: {
        chart: {
          events: {
            dataPointSelection:  function(event, chartContext, config) {
              this.props.handleBarClick();
            },
        }
     }
  }

  render() {
    return (

          <Chart
            options={this.state.options}
            series={this.state.series}
            type="bar"
            width="100%"
          />
    );
  }
}

用于在此处处理事件的 ApexCharts 文档！

我有一种感觉，因为我this.state.options作为道具Chart从 ApexCharts 传递给实际对象，当单击该栏时，事件从Chart对象注册而不是，SummaryChart也许这就是我收到错误的原因。

app.js:66798 未捕获类型错误：无法读取未定义的属性“handleBarClick”

标签： reactjsapexcharts

解决方案

问题

在构造函数this.props中尚未设置。

解决方案

访问传递给构造函数的道具。

constructor(props) {
  super(props);

  this.state = {
    options: {
      chart: {
        events: {
          dataPointSelection: function (event, chartContext, config) {
            props.handleBarClick();
          }
        }
      }
    }
  };
}

推荐阅读