[英]Having an array of Objects as a props for a React component
I have a parent component named UsersTable
(it's a chile of some other component and has users
and roles
as its props).我有一个名为
UsersTable
的父组件(它是一些其他组件的智利,并具有users
和roles
作为其道具)。 The getRoles()
function is getting all the roles for a user using an ajax request. getRoles()
函数使用 ajax 请求获取用户的所有角色。 The result is returned to render()
and stores in allroles
variable.结果返回到
render()
并存储在allroles
变量中。 allroles
is an array of Objects( [Object, Object, Object]
) and is sent to the child component, UserRow
, as its props. allroles
是一个 Objects( [Object, Object, Object]
) 数组,并被发送到子组件UserRow
作为它的道具。 But I'm getting this error:但我收到此错误:
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`.
Can someone please help me to fix it?有人可以帮我修复它吗? Here is the parent component code:
这是父组件代码:
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>
);
}
});
And here is the child component code:这是子组件代码:
export const UserRow = React.createClass({
render(){
return (
<tr>
<td>{this.props.userEmail}</td>
<td>{this.props.userRoles}</td>
</tr>
);
}
});
looks like the issue is when you render the userRoles.看起来问题出在渲染 userRoles 时。 you need to loop over it and render an element for each role
你需要遍历它并为每个角色渲染一个元素
export class UserRow extends React.Component {
render(){
return (
<tr>
<td>{this.props.userEmail}</td>
<td>{this.props.userRoles}</td>
--------------------^---------------------^
</tr>
);
}
};
try this尝试这个
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>
);
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.