javascript - ReactJS - 无法读取未定义的属性 'updateNumber'”

Question

刚接触js和React，正在尝试制作一个基本的数独程序。

当我将 UpdateNumberInCell={this.updateNumber} 添加为 Cell 组件中的属性时，出现错误:“未捕获的类型错误:无法读取未定义的属性‘updateNumber’”。我盯着这个看了一个小时，不明白出了什么问题。可能是一些非常基本的东西。

完整代码:

class Cell extends React.Component {

    constructor(props) {
        super(props);

        this.state = {editing: false};
    }

    editCell() {
        this.setState({editing: true});
    }

    editingDone() {
        let number = this.refs.newNumber.value;
        this.props.updateNumberInCell(number, this.props.index);
        this.setState({editing: false});
    }

    renderEditing() {
        return <td><textarea ref="newNumber" onBlur={this.editingDone.bind(this)} onKeyPress={this.editingDone.bind(this)} defaultValue={this.props.children}
                             maxLength="1" cols="1" rows="1" autoFocus /></td>;
    }

    renderNormal() {
        if (this.props.editable) {
            return <td onClick={this.editCell.bind(this)}>{this.props.children}</td>;
        } else {
            return <td>{this.props.children}</td>;
        }
    }

    render() {
        if (this.state.editing) {
            return this.renderEditing();
        } else {
            return this.renderNormal();
        }
    }

}


class Board extends React.Component {

    constructor(props) {
        super(props);

        let boardList = [];
        let i = 0;
        for (let r = 0; r < 3; r++) {
            boardList.push([]);
            for (let c = 0; c < 3; c++) {
                let number = this.props.boardString[i];
                if (number !== "0") {
                    boardList[r].push(
                            {
                                "index": i,
                                "number": number,
                                "editable": false,
                                "inConflict": false
                            });
                } else {
                    boardList[r].push({
                        "index": i,
                        "number": number,
                        "editable": true,
                        "inConflict": false
                    });
                }
                i++;
            }
        }
        console.log(JSON.stringify(boardList));

        this.state = {boardList};
    }

    updateNumber(number, index) {
        let newBoardList = this.state.boardList;
        for (let row = 0; row < 3; row++) {
            for (let col = 0; col < 3; col++) {
                if (newBoardList[row][col].index === index) {
                    newBoardList[row][col].number = number;
                    this.setState({boardList: newBoardList});
                }
            }
        }
    }

    renderCell(cell, i) {
        return (
                <Cell key={i} index={cell.index} editable={cell.editable} updateNumberInCell={this.updateNumber}>{cell.number}</Cell>);
    }

    render() {
        return (<div>                                                       {/*map means return a new array and do this function for each element in the list*/}
                    <table>
                        <tbody>
                        <tr>
                            {this.state.boardList[0].map(this.renderCell)}
                        </tr>
                        <tr>
                            {this.state.boardList[1].map(this.renderCell)}
                        </tr>
                        <tr>
                            {this.state.boardList[2].map(this.renderCell)}
                        </tr>
                        </tbody>
                    </table>
                </div>
        );
    }

}


ReactDOM.render(<Board boardString="102840503" />, document.getElementById("sudoku"));

Answer 1

您收到此错误，因为 renderCell 函数内的 this 引用未定义。要在回调中获取正确的 this 引用，您应该使用 bind 方法。

工作代码:

renderCell(cell, i) {
    return (
            <Cell key={i} index={cell.index} editable={cell.editable} updateNumberInCell={this.updateNumber.bind(this)}>{cell.number}</Cell>);
}

render() {
    return (<div>                                                       {/*map means return a new array and do this function for each element in the list*/}
                <table>
                    <tbody>
                    <tr>
                        {this.state.boardList[0].map(this.renderCell.bind(this))}
                    </tr>
                    <tr>
                        {this.state.boardList[1].map(this.renderCell.bind(this))}
                    </tr>
                    <tr>
                        {this.state.boardList[2].map(this.renderCell.bind(this))}
                    </tr>
                    </tbody>
                </table>
            </div>
    );
}

或者您可以在构造函数中使用 bind 来代替:

constructor(props) {
    super(props);

    this.state = {editing: false};

    this.renderCell = this.renderCell.bind(this);
    this.updateNumber = this.updateNumber.bind(this);
}