Lynda.com React.js Objekte sind nicht als React Child gültig

Question

Ich habe gerade angefangen React.js zu lernen und benutze Lynda.com, um den Überblick zu behalten. Obwohl die Videoserie, wie in an earlier post erwähnt, veraltet ist, konnte ich das Projekt mit Hilfe von anderen Stack Posts und Google zusammenstellen. Aber dieser Fehler hat mich verblüfft.

Ich bin gerade dabei zu versuchen, neue Notizen zu einer Bulletin-Board-App hinzuzufügen. Wenn ich auf die Schaltfläche zum Hinzufügen (oben rechts auf dem Bildschirm) klicke, wird der Fehler Reaction Minified # 31 ausgelöst, da das von mir verwendete Objekt als React-Kind nicht gültig ist. Ich denke, es hat mit dem Knopf zu tun, den ich gerade erstellt habe, aber ich habe keine Ahnung, wie ich das beheben kann.

Ich benutze React Version 15.3.1 und Babel Version 5.8.29 (wie im Tutorial verwendet).

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

Das Problem ist eigentlich in Ihrer Board Klasse. Sie übergeben this.add als Ereignishandler an die Eigenschaft onClick der Schaltfläche. Denken Sie daran, dass event handlers are always passed an event as the first parameter, was bedeutet, dass in Ihrer this.add Funktion, fügen Sie ein Event Objekt zu Ihrem notes Zustand, nicht eine Zeichenfolge, wie die aktuelle Signatur impliziert. Wenn die eachNote-Funktion dann ausgeführt wird, versucht es, Event als ein Kind Ihrer Note Komponente zu rendern, die verursacht, was diesen Fehler verursacht.

Wenn Sie versuchen, eine neue Notiz hinzuzufügen, werden Sie wahrscheinlich nicht möchten, dass sie überhaupt Text enthält. Ich denke also, Sie könnten das Ereignis ignorieren, das an this.add übergeben wird.

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