反应：未捕获错误：对象作为React子无效

Question

我不太清楚为什么我得到这个错误。

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`.(…) 

这里是代码如下：

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

}) 

当我打印出来showThreads，它返回与4个对象的阵列按预期方式。不太确定为什么我得到这个错误？目标是在onClick的每行下方创建4个“线程”。

Answer 1

{showThreads}是一个对象，而不是您期望的数组。您只需要简单的showThreads，因为条件已经在大括号内。