嗯,我没有看到我的疏忽,但我得到了一个控制台错误提示的空白页面:
Users.js:9 Uncaught TypeError: Cannot read property 'filter' of undefined
at Users.render (Users.js:9)
显然,我使用 'filter()'不当。我四处寻找,但没有找到任何与 'React'相关的内容。谁能帮帮我?以下是文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Users from './Users';
ReactDOM.render(
<Users list={[
{ name: 'Tyler', friend: true },
{ name: 'Ryan', friend: true },
{ name: 'Michael', friend: false },
{ name: 'Mikenzie', friend: false },
{ name: 'Jessica', friend: true },
{ name: 'Dan', friend: false }
]}
/>,
document.getElementById('root')
);
Users.js
import React from 'react';
class Users extends React.Component {
render() {
return (
<div>
<h1>Friends:</h1>
<ul>
{this.props.list.friend.filter(function (friend) {
return <li>{friend[0] === 'true'}</li>
})}
</ul>
<hr />
<h1>Non Friends:</h1>
<ul>
{this.props.list.friend.filter(function (nonFriend) {
return <li>{nonFriend[0] === 'false'}</li>
})}
</ul>
</div>
);
}
}
export default Users;
你在列表本身上调用了 .friend
,而这是数组中每个对象的属性。你还使用了 .filter
,但我不认为你在这里正确地使用了它。.filter
会返回一个包含特定元素的数组,其中传入的函数会返回一个真值。下面是使用 .filter
的方法:
var nonFriends = this.props.list.filter(function (user) {
return !user.friend;
});
var friends = this.props.list.filter(function (user) {
return user.friend;
});
return (
<div>
<h1>Friends:</h1>
<ul>{ friends }</ul>
<h1>Non Friends:</h1>
<ul>{ nonFriends }</ul>
</div>
);
如果数组较大,也可以使用.forEach
对数组进行一次遍历:
var nonFriends = [], friends = [];
this.props.list.forEach(function (user) {
if (user.friend) {
friends.push(user);
} else {
nonFriends.push(user);
}
});
// now render friends and nonFriends
我的做法是这样的,这样更直接一些
{this.props.list.map(function (person, i) {
{return person.friend
?(<li key={i}>{person.name}</li>)
: null
}
})}
1.您正在遍历列表本身,而不是列表中的某个项目,这就是为什么 this.props.list.friend.filter
没有起作用的原因。
2.我会使用 map,因为在这种情况下,你实际上并没有过滤列表。如果您愿意,可以事先将列表过滤为好友和非好友,然后将这些项目映射到其他工程师看到的列表中,这样会更直接。
3.React 希望在标记中为创建的迭代项设置 "key"。这就是 React 在状态树中创建组件间关系的方式。