javascript - 在 React JSX 中引用 `this`

Question

我正在 React JSX 中编写一个函数，其中包含需要与 this 对话的回调

    this.socket.on('addWashedMission', washedMission => {
        console.log('onAddWashedMission - %s - %s', washedMission.name, 
            new Date(washedMission.birthtime));

        this.state.washedMissions.filter(function(o) {
            return o.name === washedMission.name;
        }).forEach(function(element, i, arr) {
            // HERE IT IS //
            this.state.washedMissions.state.washedMissions.slice(
                this.state.washedMissions.state.washedMissions.indexOf(element), 1);
        });

        this.state.washedMissions.push(washedMission);
        this.state.washedMissions.sort(function(a,b) {
            return b.birthtime - a.birthtime;
        });

        this.setState({
            washedMissions: this.state.washedMissions
        });
    });

注意到 this.state.washedMissions 了吗？当我在那个回调中时，Firefox 脚本调试器告诉我浏览器不知道 this 是什么，因此我不能以这种方式操作我的数组。

我如何确保 this 在我的回调范围内——请注意，回调是同步的，所以我不担心任何时间问题。

Answer 1

你有

...forEach(function(element, i, arr) {
  this.state.washedMissions.state.washedMissions.slice(
    this.state.washedMissions.state.washedMissions.indexOf(element), 1);
});

您需要提供 thisArg 作为 Array.prototype.forEach 的第二个参数

...forEach(function(element, i, arr) {
  this.state.washedMissions.state.washedMissions.slice(
    this.state.washedMissions.state.washedMissions.indexOf(element), 1);
}, this); // <--- note the `this` after the function() {}

或者您需要一个 arrow function它在词法上绑定(bind)了 this 值

...forEach((element, i, arr) =>
  this.state.washedMissions.state.washedMissions.slice(
    this.state.washedMissions.state.washedMissions.indexOf(element), 1)
);

或者您可以使用其他答案中提供的 stone-age-slow Function.prototype.bind