由于某种原因,它有时会映射,但我得到另一个错误,即没有返回任何内容,有时它只是说无法读取未定义的属性映射。我正在尝试在React中编译用户列表。
我有一个名为UserList的组件,它为所有用户查询我的数据库并更新状态:
const UserList = React.createClass({
getInitialState: function () {
return {
users: []
}
},
componentDidMount: function () {
this.loadUsersFromServer();
},
loadUsersFromServer: function () {
axios.get('/api/users').then((users) => {
this.setState({users: users.data.users});
});
},
render: function () {
return (
<div>
<h1>User List</h1>
<User
users={this.state.users}
/>
</div>
);
},
});
然后我将它传递给它的子组件User,这就是错误发挥作用的地方:
const User = React.createClass({
render: function () {
console.log('props: ' + JSON.stringify(this.props.users));
const users = this.props.users.map((user) => {
return (
<User
key={user._id}
username={user.username}
/>
);
});
return (
<div id="users">
{users}
</div>
);
},
});
Chrome Dev工具的有趣之处在于,由于某种原因,我在尝试打印this.props.users时会得到三个日志,而且我不确定为什么它会退出三个,但是中间的一个都有我正在寻找的用户:
非常感谢任何帮助!
答案 0 :(得分:1)
您可以尝试将用户呈现逻辑放在UserList类的方法中。接近这一点应该有用。
const UserList = React.createClass({
getInitialState: function () {
return {
users: []
}
},
componentDidMount: function () {
this.loadUsersFromServer();
},
loadUsersFromServer: function () {
axios.get('/api/users').then((users) => {
this.setState({users: users.data.users});
});
},
renderUsers: function (users) {
return <div>{users.map(user => <div key={user._id} username={user.username} />)}</div>
},
render: function () {
return (
<div>
<h1>User List</h1>
{ this.renderUsers(this.state.users) }
</div>
);
},
});
答案 1 :(得分:0)
在某个时刻(第二次刷新)this.props.users
看起来未定义,地图功能无法处理它。
我使用React.Component
语法重写了该示例,因为我从未使用旧的React(在V0.13之前)语法。
检查不同语法here的详细信息。
然而,这部分:
const User = React.createClass({
render: function () {
console.log('props: ' + JSON.stringify(this.props.users));
const users = this.props.users.map((user) => {
return (
<User
key={user._id}
username={user.username}
/>
看起来很奇怪。我认为您在用户内部使用了用户。
以下是我重写它的方法,稍作修改,因为我没有使用过axios。
class UserList extends React.Component{
constructor(props){
super(props);
this.state = { users : [] };
}
componentDidMount() {
this.loadUsersFromServer();
}
loadUsersFromServer(){
this.setState({users:
[{
"_id": 1,
"username": "Nicole",
"password": "0uTjaH",
"_v": "7.6.9"
}, {
"_id": 2,
"username": "Steve",
"password": "22l8h6a8NPU",
"_v": "7.41"
}, {
"_id": 3,
"username": "Joyce",
"password": "yA3efEc",
"_v": "6.3"
}, {
"_id": 4,
"username": "Todd",
"password": "7LsQ9aHqIfhy",
"_v": "7.1"
}, {
"_id": 5,
"username": "Maria",
"password": "uHZ5fkCi04v",
"_v": "9.31"
}]
});
}
render(){
return (
<div>
<h1>User List </h1>
<User users={this.state.users} />
</div>
);
}
};
class User extends React.Component{
constructor(props){
super(props);
}
render(){
console.log(typeof(this.props.users));
//console.log(this.props.users);
//const user = JSON.stringify(this.props.users);
const userList = this.props.users.map((user) => {
return (
<div>
<span>key={user._id}</span>
<span>username={user.username}</span>
</div>
);
});
return (
<div id="users">
{userList}
</div>
);
}
}
ReactDOM.render(<UserList /> , document.getElementById('root') );
&#13;
span {padding: 3px}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
&#13;