React: Uncaught Error: Objekte sind nicht gültig als React Kind

Question

Ich bin nicht ganz sicher, warum ich diesen Fehler bekomme.

react.js:20149 Uncaught Error: Objects are not valid as a React child (found: object with keys {showThreads}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `CreateRow`.(…) 

Hier ist der Code unter:

var ShowThreads = React.createClass({ 

    render: function() { 
     return(
      <table> 
       <tbody> 
        {this.props.thread} 
       </tbody> 
      </table> 
     ) 
    } 
}); 

var CreateRow = React.createClass({ 
    getInitialState: function() { 
     return { 
      threadVisible: false, 
      threads: ['lorem', 'ipsum', 'imperator', 'quad'], 
     } 
    }, 

    onClick: function(){ 
     // this.getThreads() 
     this.setState({threadVisible: !this.state.threadVisible}) 
    }, 

    render: function() { 
     var showThreads = this.state.threads.map((thread) => { 
      return (
       <ShowThreads thread ={thread}/> 
      ) 
     }); 

     var rows = [(
      <tr onClick={this.onClick}>  
        <td>{this.props.row['id']}</td> 
        <td>{this.props.row['email']}</td> 
        <td>{this.props.row['first']}</td> 
        <td>{this.props.row['last']}</td> 
        <td>{this.props.row['title']}</td> 
        <td>{this.props.row['company']}</td> 
        <td>{this.props.row['linkedin_url']}</td> 
        <td>{this.props.row['role']}</td> 
       </tr> 
      ),(
       <tr> 
        <td colSpan="8"> 
         { 
          this.state.threadVisible 
          ? {showThreads} 
          : null 
         } 
        </td> 
       </tr> 
     )] 
     return(
      <tbody> 
       {rows} 
      </tbody> 
     ) 
    }, 

}) 

Wenn I showThreads ausgedruckt, es ein Array mit 4 Objekte zurückgegeben, wie erwartet. Nicht ganz sicher, warum ich diesen Fehler bekomme? Ziel ist es, unterhalb jeder Zeile 4 "Threads" zu erstellen, die von onClick sichtbar sind.

Answer 1

{showThreads} ist ein Objekt, nicht das Array, das Sie erwarten. Sie möchten stattdessen eine einfache showThreads, weil die Bedingung bereits in geschweiften Klammern ist.