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

Question

我正在尝试在 apexchart 状态下使用 dataPointSelection 中的 props 值，但我收到错误消息，即 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
                  );

如何解决此错误和事件中的用户道具值？

Answer 1

你通常不需要在构造函数中使用 this behind 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
                  );

另一种方法是使用 .bind(this) 将上层 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.
            // ...

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

React this.props is undefined in state event?

javascript

dom-events

reactjs

react-props

apexcharts