javascript - 保存一个这个。引用

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 6 年前。

我的问题是我有一个网格，可以选择创建新行。此操作向我的后端发送一个 ajax 请求，将新行插入到我的数据库中。完成后，它将 MAX 索引(最近添加的索引)返回到我的前端。我想使用这个索引作为 ASSERTION_ID 中的值。所以我需要等待 ajax 请求完成，然后使用创建的索引更新网格。

问题是当我使用when()时。然后()。或者只是将数据传递到我的 newRow 的成功回调，然后 this.state.rows 和 this.setState 的 .this 部分指向“错误”的 this。那么如何才能确保任务完成的同时仍保留相同的 this.引用？

            handleAddRow: function(e) {
                var newAssertionID;
                $.when($.ajax({
                    url: root + port + "/insertannotation",
                    type: 'post',
                    success: function(data) {
                        newAssertionID = data.assertionID.rows[0][0]

                    }
                })).then(function(data) {
                    var newRow = {
                        ASSERTION_ID: newAssertionID
                    };
                    var rows = React.addons.update(this.state.rows, { $push: [newRow] });
                    this.setState({ rows: rows });
                });

            },
            render: function() {
                return (
                    React.createElement(ReactDataGrid, {
                        contextMenu: React.createElement(MyContextMenu, {
                            onRowDelete: this.deleteRow
                        }),
                        enableCellSelect: true,
                        onGridSort: this.handleGridSort,
                        columns: columns,
                        rowGetter: this.rowGetter,
                        rowsCount: this.getSize(),
                        minHeight: 500,
                        onRowUpdated: this.handleRowUpdated,
                        toolbar: React.createElement(Toolbar, {
                            enableFilter: true,
                            onAddRow: this.handleAddRow
                        }),
                        onAddFilter: this.handleFilterChange
                    })
                );
            }

Answer 1

您必须保存引用。

handleAddRow: function(e) {
    var that = this; // note this
    var newAssertionID;
    $.when($.ajax({
        url: root + port + "/insertannotation",
        type: 'post',
        success: function(data) {
            newAssertionID = data.assertionID.rows[0][0]

        }
    })).then(function(data) {
        var newRow = {
            ASSERTION_ID: newAssertionID
        };
        var rows = React.addons.update(that.state.rows, {
            $push: [newRow]
        });
        that.setState({
            rows: rows
        });
    });

},