2

対話する必要があるコールバックを含む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。また、コールバックは同期的であるため、タイミングの問題について心配する必要はありません。

4

3 に答える 3

2

すべての関数でより多くのアロー関数を使用する

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

    this.state.washedMissions
        .filter(o => {
            return o.name === washedMission.name;
        })
        .forEach((element, i, arr) => {
            const elementIndex = this.state.washedMissions.state.washedMissions.indexOf(element);
            this.state.washedMissions.state.washedMissions.slice(elementIndex, 1);
        });

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

    this.setState({
        washedMissions: this.state.washedMissions
    });
});
于 2015-11-05T03:32:22.753 に答える
1

問題はthis、匿名関数のスコープ内で、それが定義された包含スコープを参照していないことです。代わりに、それが割り当てられ、後で呼び出されるオブジェクトのスコープを参照します。

したがって、必要なthis参照を考えるには、それを「だます」必要がありthisます。

目的を達成するには、いくつかの方法があります。

  1. クロージャーを作成するvar that = this;代わりに、無名関数の外部で定義を使用し、内部で参照します。this(古いブラウザの下位互換性が向上します)

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

  2. thisメソッドに渡す前に、匿名関数のスコープをその定義スコープにバインドしますforEach(これを処理するための ECMA5 メソッドをお勧めします)。

    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);
}.bind(this));
于 2015-11-05T03:08:54.617 に答える