在React组件渲染函数中this.state未定义

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

实际上，这是一个范围问题，在遍历map时声明一个函数，在函数内部使用this函数将引用不同的上下文。 您可以使用箭头功能( ) => { ... }

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

或者在映射函数var self = this之前在另一个变量中分配this引用

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