this.state не определено в функции рендеринга компонента React

Question

Я новичок в ReactJS. Хорошо работает следующая функция:

_renderTable: function() {
    return(
        React.DOM.table(null,
            React.DOM.thead( {onClick: this._sort},
                React.DOM.tr(null,
                    this.props.headers.map(function (title, idx) {
                        if (this.state.sortby === idx) {
                            title += this.state.descending ? ' \u2191' : ' \u2193'
                        }
                        return React.DOM.th({key: idx}, title);
                    }, this)
                )
            ),
            React.DOM.tbody( {onDoubleClick: this._showEditor},
                this._renderSearch(),
                this.state.data.map(function (row, rowidx) {
                    return(
                        React.DOM.tr({key: rowidx},
                            row.map(function (cell, idx) {
                                var content = cell;

                                //To-Do editable field on double click
                                var edit = this.state.edit;
                                if (edit && edit.row === rowidx && edit.cell === idx) {
                                    content = React.DOM.form({onSubmit: this._save},
                                        React.DOM.input({
                                            type: "text",
                                            defaultValue: content,
                                        })
                                    );
                                }
                                return React.DOM.td({
                                    key: idx,
                                    "data-row": rowidx
                                }, content);
                            }, this)
                        )
                    );
                }, this)
            )
        )
    );
},

Когда я переписываю его, используя babel:

_renderTable: function() {
    return(
        <table>
            <thead onClick={this._sort}>
                <tr>{
                    this.props.headers.map(function (title, idx) {
                        if (this.state.sortby === idx) {
                            title += this.state.descending ? ' \u2191' : ' \u2193'
                        }
                        return <th key={idx}>{title}</th>
                    }, this)
                }</tr>
            </thead>
            <tbody onDoubleClick={this._showEditor}>
            {this._renderSearch()}
            {console.log("Hello", this.state)}
            {
                this.state.data.map(function (row, rowidx) {
                    return(
                        <tr key={rowidx}>{
                            row.map(function (cell, idx) {
                                var content = cell;
                                console.log("Hello2", this);
                                var edit = this.state.edit;
                                if (edit && edit.row === rowidx && edit.cell === idx) {
                                    content = <form onSubmit={this._save}>
                                                <input type="text" defaultValue={content}>
                                                </input>
                                            </form>
                                }
                                return <td key={idx}>{content}</td>
                            })
                        }</tr>
                    );
                })
            }
            </tbody>
        </table>
    );
},

Я получаю следующую ошибку:

Uncaught TypeError: Cannot read property 'state' of undefined

замена var edit = this.state.edit; на var edit = false; устраняет ошибку.

Поиск показывает привязку this в случае вызова его в теле функции, поэтому я попытался сделать это, но безуспешно. Не уверен, что проблема в связывании, потому что не-JSX-версия кода работает нормально.

Answer 1

Это действительно проблема области действия, когда при просмотре карты вы объявляете функцию, использование this внутри этой функции будет ссылаться на другой контекст. Вы можете использовать функцию стрелки ( ) => { ... }

this.state.data.map((row, rowidx) => {
    ...
    row.map((cell, idx) => { 
        ...
    }
})

Или назначьте ссылку на this в другой переменной перед функцией карты var self = this

var self = this
this.state.data.map(function (row, rowidx) {
    ...
    row.map((cell, idx) => { 
        var edit = self.state.edit;
        ...
    }
})