javascript - 将对象数组作为 React 组件的 Prop

Question

我有一个名为 UsersTable 的父组件(它是某个其他组件的子集，并且有 users 和 roles 作为它的属性)。 getRoles() 函数使用 ajax 请求获取用户的所有 Angular 色。结果返回到 render() 并存储在 allroles 变量中。 allroles 是一个 Objects([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 时。您需要遍历它并为每个 Angular 色呈现一个元素

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(){
        const roles = this.props.userRoles.map((role) => <div>{role.id || ''}</div>);
        return (
            <tr>
                <td>{this.props.userEmail}</td>
                <td>{roles}</td>
            </tr>
        );
    }
};