オブジェクトの配列をReactコンポーネントの小道具として持っている

Question

私はUsersTableという親コンポーネントを持っています（それは他のコンポーネントのチレールで、その小道具としてusersとrolesです）。 getRoles()関数は、ajaxリクエストを使用してユーザーのすべての役割を取得しています。結果はrender()に戻り、変数allrolesに格納されます。 allrolesは、オブジェクトの配列（[Object, Object, Object]）で、その子コンポーネントとして子コンポーネントUserRowに送信されます。しかし、私はこのエラーが発生しています：

invariant.js:44 Uncaught Error: Objects are not valid as a React child 
(found: object with keys {description, id, links, name}). 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 
`UserRow`. 

誰かが私を修正する手助けをしてもらえますか？あなたがuserRolesをレンダリングする際に問題があるように見えます

export const UserRow = React.createClass({ 
    render(){ 
     return (
      <tr> 
       <td>{this.props.userEmail}</td> 
       <td>{this.props.userRoles}</td> 
      </tr> 
     ); 
    } 
}); 

Answer 1

：ここ

export const UsersTable = React.createClass({ 
    getRoles(){ 
     var oneRole = ""; 
     this.props.users.forEach(function(user){ 
      server.getUserRoles(user.id,   
       (results) => { 
        this.oneRole =results['hits']['hits'] 
        notifications.success("Get was successful "); 
       }, 
       () => { 
        notifications.danger("get failed "); 
       }); 
      }.bind(this)); 
     return this.oneRole; 
    }, 

    render() { 
     var rows = []; 
     var allroles = this.getRoles() 
     this.props.users.map(function(user) { 
      rows.push(<UserRow userID={user.id} 
           userEmail={user.email} 
           userRoles={allroles} 
           roles={this.props.roles} />); 
      }.bind(this)); 
     return (
      <table className="table"> 
       <thead> 
        <tr> 
         <th>Email Address</th> 
         <th>Role</th> 
         <th>Edit</th> 
        </tr> 
       </thead> 
       <tbody>{rows}</tbody> 
      </table> 
     ); 
    }  
}); 

と子コンポーネントのコードされています。ここでは親コンポーネントのコードがあります。あなたはuserRolesがオブジェクトであり、あなたはそれを文字列として印刷しようとしているので、それがこの

export class UserRow extends React.Component { 
    render(){ 
     constroles = this.props.userRoles.map((role) => <div>{role.id || ''}</div>); 
     return (
      <tr> 
       <td>{this.props.userEmail}</td> 
       <td>{roles}</td> 
      </tr> 
     ); 
    } 
};