Lynda.com React.js 对象作为 React Child 无效

Question

刚开始学习 React.js 并且一直在使用 Lynda.com 来掌握事情的窍门。尽管视频系列如an earlier post 中提到的那样已经过时，但我已经能够在其他 Stack 帖子和 Google 的帮助下拼凑出这个项目。但是这个错误让我很难过。

我正试图向公告板应用程序添加新笔记。当我单击添加按钮（在屏幕右上角）时，它会引发 React Minified #31 错误，说我正在使用的对象作为 React 子对象无效。我认为这与我刚刚创建的按钮有关，但我不知道如何解决这个问题。

我正在使用 React 版本 15.3.1 和 Babel 版本 5.8.29（在教程中使用）。

Note.js

 var Note = React.createClass({
    getInitialState: function() {
        return {editing: false}
    },
    edit: function() {
        this.setState({editing: true});
    },
    save: function() {
        // var val = ReactDOM.findDOMNode(this.refs.newText).value;
        this.props.onChange(ReactDOM.findDOMNode(this.refs.newText).value, 
            this.props.index);
        this.setState({editing: false});
    },
    remove: function() {
        this.props.onRemove(this.props.index);
    },
    renderDisplay: function() {
        return (
            <div className="note">
                <p>{this.props.children}</p>
                <span>
                    <button onClick={this.edit}
                            className="btn btn-primary glyphicon glyphicon-pencil"/>
                    <button onClick={this.remove}
                            className="btn btn-danger glyphicon glyphicon-trash"/>
                </span>
            </div>
            );
    },
    renderForm: function() {
        return (
            <div className="note">
            <textarea ref="newText" defaultValue={this.props.children} 
            className="form-control"></textarea>
            <button onClick={this.save} className="btn btn-success btn-sm glyphicon glyphicon-floppy-disk" />
            </div>
            )
    },
    render: function() {
        if (this.state.editing) {
            return this.renderForm();
        }
        else {
            return this.renderDisplay();
        }
    }
});

var Board = React.createClass({
    propTypes: {
        count: function(props, propName) {
            if (typeof props[propName] !== "number") {
                return new Error ('The count property must be a number');
            }
            if (props[propName] > 100) {
                return new Error ('Creating' + props[propName] + 'is silly');
            }
        }
    },
    getInitialState: function() {
       return {
            notes: []
       }; 
    },
    add: function(text){
        var array = this.state.notes;
        array.push(text);
        this.setState({notes:array});
    },
    update: function(newText, i) {
        var array = this.state.notes;
        array[i] = newText;
        this.setState({notes:array});


    },
    remove: function(i) {
        var array = this.state.notes;
        array.splice(i, 1);
        this.setState({note:array});

    },
    eachNote: function(note, i) {
        return (
            <Note key={i}
                index={i}
                onChange={this.update}
                onRemove={this.remove}
            >{note}</Note>
        );
    },
    render: function() {
        return <div className="board">
            {this.state.notes.map(this.eachNote)}
            <button className="btn btn-sm glyphicon glyphicon-plus" 
                    onClick={this.add}></button>
        </div>
    }

});

ReactDOM.render(<Board count={10}/>, 
    document.getElementById('react-container'));

Answer 1

问题实际上出在您的Board 类中。您将 this.add 作为事件处理程序传递给按钮的 onClick 属性。请记住event handlers are always passed an event as the first parameter，这意味着在您的this.add 函数中，您将一个Event 对象添加到您的notes 状态，而不是一个字符串，就像当前签名所暗示的那样。然后，当 eachNote 函数正在执行时，它会尝试将 Event 渲染为 Note 组件的子组件，这就是导致此错误的原因。

如果您尝试添加新笔记，您可能根本不希望其中包含任何文本。所以我认为您可以放心地忽略传递给this.add 的事件。

add: function() {
    var array = this.state.notes;
    array.push('');
    this.setState({notes:array});
},