Javascript Lynda.com React.js对象作为React子对象无效

刚开始学习React.js，并一直在使用Lynda.com来掌握诀窍。尽管如中所述，该视频系列已经过时，但在其他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'));

var Note=React.createClass({
getInitialState:函数（）{
返回{编辑：false}
},
编辑：函数（）{
this.setState（{editing:true}）；
},
保存：函数（）{
//var val=ReactDOM.findDOMNode（this.refs.newText）.value；
this.props.onChange（ReactDOM.findDOMNode（this.refs.newText）.value，
这是一个指数）；
this.setState（{editing:false}）；
},
删除：函数（）{
this.props.onRemove（this.props.index）；
},
renderDisplay:函数（）{
返回(
{this.props.children}

);
},
renderForm:function（）{
返回(
)
},
render:function（）{
if（this.state.editing）{
返回这个.renderForm（）；
}
否则{
返回此.renderDisplay（）；
}
}
});
var Board=React.createClass({
道具类型：{
计数：函数（道具、道具名称）{
if（道具类型[道具名称]！=“编号”）{
返回新错误（'count属性必须是数字'）；
}
如果（道具[道具名称]>100）{
返回新错误（'创建'+props[propName]+'是愚蠢的'）；
}
}
},
getInitialState:函数（）{
返回{
注：[]
}; 
},
添加：函数（文本）{
var数组=this.state.notes；
array.push（文本）；
this.setState（{notes:array}）；
},
更新：函数（newText，i）{
var数组=this.state.notes；
数组[i]=newText；
this.setState（{notes:array}）；
},
删除：功能（i）{
var数组=this.state.notes；
阵列拼接（i，1）；
this.setState（{note:array}）；
},
各注：功能（注一）{
返回(
{注}
);
},
render:function（）{
返回
{this.state.notes.map（this.eachNote）}
}
});
ReactDOM.render（，
document.getElementById（'react-container'）；

问题实际上在你的

板上。您正在传递
this。将
作为事件处理程序添加到按钮的
onClick
属性。请记住，这意味着在
this.add
函数中，您正在向
notes
状态添加一个
事件
对象，而不是像当前签名所暗示的字符串。然后，当执行
eachNote
函数时，它试图将
事件
呈现为
Note
组件的子级，这就是导致此错误的原因

如果你想添加一个新的便笺，很可能你根本不希望它有任何文字。因此，我认为您可以安全地忽略传递给
this.add的事件

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

问题实际上在你的
板上。您正在传递
this。将
作为事件处理程序添加到按钮的
onClick
属性。请记住，这意味着在
this.add
函数中，您正在向
notes
状态添加一个
事件
对象，而不是像当前签名所暗示的字符串。然后，当执行
eachNote
函数时，它试图将
事件
呈现为
Note
组件的子级，这就是导致此错误的原因

如果你想添加一个新的便笺，很可能你根本不希望它有任何文字。因此，我认为您可以安全地忽略传递给
this.add的事件

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

那么我的add函数应该是这样的吗
add:function（text）{var array=this.state.notes；array.push（text）；this.setState（{notes}）}
还是我完全关闭了？不，这只会改变将事件添加到数组的方式。结果是一样的。让我问一下：你希望
text
在
add
函数中是什么？是的，我就是这么想的。视频中的解释方式，以及我理解事物的方式，我希望在点击add按钮时将文本添加到notes数组中。这将创建一个新的便笺并放在黑板上。是的，变量
text
正在添加到
notes
数组中，但我想说的是
text
不包含您认为它包含的信息<代码>文本
是您单击按钮时触发的事件。添加一个
console.log（text）
到
this.Add中，你就会明白我的意思了！所以文本没有定义。我不能用newText sine来更新笔记上已经找到的任何文本。因此，我需要在将文本发送到click处理程序之前设置文本，但是在哪里设置呢？或者我还真的很遥远吗？那么我的add函数应该看起来像这样吗<代码>添加：function（text）{var array=this.state.notes；array.push（text）；this.setState（{notes}）}
还是我完全关闭了？不，这只是改变了将事件添加到