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

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

1 个答案: