Javascript 使用 React 过滤列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43643877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Filtering A List With React
提问by Ron Allen Smith
Hmm, I don't see my omission, but I get a blank page with a console error saying:
嗯，我没有看到我的遗漏，但我得到一个空白页面，其中显示控制台错误：
Users.js:9 Uncaught TypeError: Cannot read property 'filter' of undefined
at Users.render (Users.js:9)
Apparently I'm using 'filter()' improperly. I looked around but didn't find anything 'React' related. Can Anyone help? Here are the files:
显然我不正确地使用了'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
索引.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
用户.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;
采纳答案by Ron Allen Smith
Okay, looks like "Users.js" should be:
好的，看起来“Users.js”应该是：
import React from 'react';
class Users extends React.Component {
render() {
let friends = this.props.list.filter( function (user) {
return user.friend === true
});
let nonFriends = this.props.list.filter( function (user) {
return user.friend !== true
});
return (
<div>
<h1>Friends:</h1>
<ul>
{friends.map(function (user) {
return <li key={user.name}>{user.name}</li>
})}
</ul>
<h1>Non Friends:</h1>
<ul>
{nonFriends.map(function (user) {
return <li key={user.name}>{user.name}</li>
})}
</ul>
</div>
);
}
}
export default Users;
Or even this:
甚至这个：
import React from 'react';
class Users extends React.Component {
render() {
return (
<div>
<h1>Friends:</h1>
<ul>
{this.props.list.filter(function (user) { // filter first for friends
return user.friend === true // returns a new array
}).map(function (user) { // map the new array to list items
return <li key={user.name}>{user.name}</li> // don't forget unique key for each item
})}
</ul>
<hr />
<h1>Non Friends:</h1>
<ul>
{this.props.list.filter(function (user) { // filter first for non-friends
return user.friend !== true // returns a new array
}).map(function (user) { //map the new array to list items
return <li key={user.name}>{user.name}</li> // don't forget unique key for each item
})}
</ul>
</div>
);
}
}
export default Users;
回答by Vinay
You are calling .friendon the list itself when that's a property of each object in your array. You are also using .filter, but I don't think you're using it correctly here. .filterwill return an array with certain elements where the function passed in returns a truthy value. Here's how you could do it with .filter:
.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>
);
You could also do a .forEachfor 1 pass through the array if the array is large:
.forEach如果数组很大，您还可以对数组执行for 1 传递：
var nonFriends = [], friends = [];
this.props.list.forEach(function (user) {
if (user.friend) {
friends.push(user);
} else {
nonFriends.push(user);
}
});
// now render friends and nonFriends
回答by oftenfrequent
I would do something like this instead which is a little more straightforward
我会做这样的事情，而不是更直接一点
{this.props.list.map(function (person, i) {
{return person.friend
?(<li key={i}>{person.name}</li>)
: null
}
})}
- You are iterating over the list itself, not an item in the list which is why
this.props.list.friend.filterdidn't work. - I would use map because you are not actually filtering the lists in this case. If you wanted to you could filter the list beforehand into friends and non friends and map over those items which would actually be more straightforward for another engineer to see.
- React wants
keys in the markup for the iterated items created. That is how React creates the relationships between components in the state tree.
- 您正在迭代列表本身，而不是列表中的项目，这就是为什么
this.props.list.friend.filter不起作用。 - 我会使用 map ，因为在这种情况下您实际上并没有过滤列表。如果您愿意，您可以预先将列表过滤为朋友和非朋友，并映射这些项目，这对于其他工程师来说实际上更直接。
- React 希望
key在创建的迭代项的标记中使用 s。这就是 React 在状态树中创建组件之间关系的方式。
回答by Ariel Jr
I think that you are trying to filter the atribute, and not the list. Try to change this:
我认为您正在尝试过滤属性，而不是列表。尝试改变这一点：
this.props.list.friend.filter
to this:
对此：
this.props.list.filter
