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

Question

I am newbie in ReactJS. Following function works well:

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

When I rewrite it using 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>
    );
},

I get following error:

Uncaught TypeError: Cannot read property 'state' of undefined

replacing var edit = this.state.edit; with var edit = false; removes the error.

Searching shows about binding this in a case of calling it in functions body so I tried to do it but without luck. Not sure that the issue in binding because non-JSX version of code working fine.

Answer 1

It is indeed a scope issue, when iterating through map you are declaring a function, using this inside that function will reference a different context. You may use an arrow function ( ) => { ... }

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

Or assign reference to this in another variable before your map function var self = this

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