객체 배열을 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> 
     ); 
    } 
};