Perserving a this. reference

Question

My problem is that I have a grid that has an option to create a new row. This action sends an ajax request to my backend that inserts new rows into my Database. When completed it returns the MAX index (the most recently added index) to my frontend. I want to use this index as the value in ASSERTION_ID. So I need to wait for ajax request to finish and then update the grid with the created index.

The problem is that when I'm using a when(). then(). or simply the success callback for passing the data to my newRow then the .this part of this.state.rows and this.setState points to the "wrong" this. So how can you make sure that a task is completed while still perserving the same this. reference?

            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
                    })
                );
            }

score 1 · Accepted Answer · answered Aug 17 '16 at 16:34

You have to have a reference saved.

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
        });
    });

},

Perserving a this. reference

1 Answers1