Наличие массива объектов в качестве реквизита для компонента 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`. 

Может кто-нибудь, пожалуйста, помогите мне исправить это? Вот код компонента родителя:

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

А вот код ребенка компонент:

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

Answer 1

выглядит как проблема, когда вы оказать UserRoles. вам нужно петлю над ним и сделать элемент для каждой роли

export class UserRow extends React.Component { 
    render(){ 
     return (
      <tr> 
       <td>{this.props.userEmail}</td> 
       <td>{this.props.userRoles}</td> 
--------------------^---------------------^ 
      </tr> 
     ); 
    } 
}; 

попробовать этот

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