Javascript Undefined不仅仅是构造函数中某些变量的对象

我有一个非常简单的问题，但我看不出它为什么会发生。我有一个组件，其中我在构造函数中声明了两个数组：

class FilterModal extends Component {
    constructor(props) {
        super(props);
        this.transport_options = ["driving", "tram", "walking"];
        this.pressed_percentages = ["allPressed", "under15Pressed","under30Pressed", "over30Pressed"];
      filters = {
        "driving": {
           "allPressed":false,
           "under15Pressed":false,
           "under30Pressed":false,
           "over30Pressed":false
        },
        "tram": {
            "allPressed":false,
            "under15Pressed":false,
            "under30Pressed":false,
            "over30Pressed":false
        },
        "walking": {
            "allPressed":false,
            "under15Pressed":false,
            "under30Pressed":false,
            "over30Pressed":false
        },
        "isFilterActive": false
    }
    //state declared here
    }

}

resetPressed = () => {

    this.transport_options.forEach(function (transport_option) {
        this.pressed_percentages.forEach(function (pressed_percentage) {
            filters[transport_option][pressed_percentage] = false;
        })
    });

    //additional business logic
}

我想访问我在构造函数后定义的函数中的变量

transport\u options

和

pressed\u percentage

：

class FilterModal extends Component {
    constructor(props) {
        super(props);
        this.transport_options = ["driving", "tram", "walking"];
        this.pressed_percentages = ["allPressed", "under15Pressed","under30Pressed", "over30Pressed"];
      filters = {
        "driving": {
           "allPressed":false,
           "under15Pressed":false,
           "under30Pressed":false,
           "over30Pressed":false
        },
        "tram": {
            "allPressed":false,
            "under15Pressed":false,
            "under30Pressed":false,
            "over30Pressed":false
        },
        "walking": {
            "allPressed":false,
            "under15Pressed":false,
            "under30Pressed":false,
            "over30Pressed":false
        },
        "isFilterActive": false
    }
    //state declared here
    }

}

resetPressed = () => {

    this.transport_options.forEach(function (transport_option) {
        this.pressed_percentages.forEach(function (pressed_percentage) {
            filters[transport_option][pressed_percentage] = false;
        })
    });

    //additional business logic
}

我的问题是：当我调用

resetPressed

时，我得到消息

“undefined不是一个对象（计算'this.pressed\u percentages'）

。但是，

this.transport\u options

不会触发任何错误消息

---

所以我的问题是：

this.transport\u options

为什么起作用，但是

this.pressed\u percentrations

会抛出错误？

您能在调用此函数的地方共享代码吗

---

看起来此范围已更改

这一定是您的函数未绑定的问题。请尝试使用箭头运算符定义您的函数，或使用以下示例中使用的

绑定

函数

class App extends React.Component {
  constructor(props) {
    super(props);
     this.transport_options = ["driving", "tram", "walking"];
        this.pressed_percentages = ["allPressed", "under15Pressed","under30Pressed", "over30Pressed"];
      this.filters = {
        "driving": {
           "allPressed":false,
           "under15Pressed":false,
           "under30Pressed":false,
           "over30Pressed":false
        },
        "tram": {
            "allPressed":false,
            "under15Pressed":false,
            "under30Pressed":false,
            "over30Pressed":false
        },
        "walking": {
            "allPressed":false,
            "under15Pressed":false,
            "under30Pressed":false,
            "over30Pressed":false
        },
        "isFilterActive": false
    }

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this.transport_options)
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        click me
      </button>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

---

有关更多解释，请参考

我尝试了您的解决方案，但我得到了相同的错误：“undefined不是一个对象（评估'this.pressed_percentage'）我得到了您的问题，这个问题仍然与bind相关。您将普通函数作为回调传递。尝试传递箭头运算符函数或绑定回调，如resetPressed=（）=>{this.transport\u options.forEach（（transport\u option）=>{this.pressed\u percentage.forEach（（pressed\u percentage）=>{filters[transport\u option][pressed\u percentage]=false；}）；//其他业务逻辑}我尝试了中描述的不同方法-绑定、类字段和箭头函数。这些都不管用。对我来说，问题不是没有调用

resetPressed（）

；我的问题是，

this.resetPercentages

未定义。您是否也像上面提到的那样更改了回调？我在

render（）{return（this.resetPressed（）}>Reset