Question

我正在尝试在状态下的props中的dataPointSelection中使用apexchart中的this.props值，但是却收到错误消息，指出constructor(props) { super(props); const { t, too, fromm } = this.props; console.log("Upper" + this.props.fromm); this.state = { ...props, options: { chart: { id: "Speeding", events: { dataPointSelection: function(event, chartContext, opts) { switch (opts.w.config.xaxis.categories[opts.dataPointIndex]) { case "0-10": window.open( window.location.origin + `/overspeeding/10/0/${ this.props.too ? `${this.props.too}` : `${cc}` }/${ this.props.fromm ? `${this.props.fromm}` : "2016-01-04" }` // in this line i am getting error );是未定义的，并且值也未显示在控制台日志中。这是我做的代码：

bin/magento deploy:mode:set developer
bin/magento setup:config:set --enable-debug-logging=true
bin/magento cache:flush

在事件中如何解决此错误和用户支持值？

Answer 1

您通常不需要在构造函数中的props之后。尝试道具

Answer 2

问题在于，在function内部，您无法访问与构造函数中相同的this。相反，您可以访问传递的props对象，该对象包含道具。

只要在此处将this.props替换为props，就可以了：

constructor(props) {
    super(props);
    const { t, too, fromm } = props;
    console.log("Upper" + props.fromm);
    this.state = {
      ...props,
      options: {
        chart: {
          id: "Speeding",
          events: {
            dataPointSelection: function(event, chartContext, opts) {
              switch (opts.w.config.xaxis.categories[opts.dataPointIndex]) {
                case "0-10":
                  window.open(
                    window.location.origin +
                      `/overspeeding/10/0/${
                        props.too ? `${props.too}` : `${cc}`
                      }/${
                        props.fromm ? `${props.fromm}` : "2016-01-04"
                      }` // in this line i am getting error
                  );

另一种方法是使用this将上部.bind(this)绑定到新函数，或者仅使用没有自身的this的箭头函数：

constructor(props) {
    super(props);
    const { t, too, fromm } = this.props;
    console.log("Upper" + this.props.fromm);
    this.state = {
      ...props,
      options: {
        chart: {
          id: "Speeding",
          events: {
            dataPointSelection: (event, chartContext, opts) => { // Arrow funciton
              switch (opts.w.config.xaxis.categories[opts.dataPointIndex]) {
                case "0-10":
                  window.open(
                    window.location.origin +
                      `/overspeeding/10/0/${
                        this.props.too ? `${this.props.too}` : `${cc}`
                      }/${
                        this.props.fromm ? `${this.props.fromm}` : "2016-01-04"
                      }` // in this line i am getting error
                  );

使用function.bind：

constructor(props) {
    super(props);
    const { t, too, fromm } = this.props;
    console.log("Upper" + this.props.fromm);
    this.state = {
      ...props,
      options: {
        chart: {
          id: "Speeding",
          events: {
            dataPointSelection: function(event, chartContext, opts) {
              switch (opts.w.config.xaxis.categories[opts.dataPointIndex]) {
                case "0-10":
                  window.open(
                    window.location.origin +
                      `/overspeeding/10/0/${
                        this.props.too ? `${this.props.too}` : `${cc}`
                      }/${
                        this.props.fromm ? `${this.props.fromm}` : "2016-01-04"
                      }` // in this line i am getting error
                  );
                  // ...
                }
              }.bind(this)// Binding the upper this to function scope.
            // ...

反应this.props在状态事件中未定义？

2 个答案: