javascript 使用 React 过滤对象列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51901124/
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 object list with React
提问by Pawe? Stanecki
It could be a clone post but I did not find any solution for in my case. I have list of an objects:
它可能是一个克隆帖子，但在我的情况下我没有找到任何解决方案。我有一个对象列表：
export default function() {
return [
{name: 'Mark Teer Stegen'},
{name: 'Nelson Semedo'},
{name: 'Gerrard Pique'},
{name: 'Ivan Rakitic'},
{name: 'Sergio Busquets'},
{name: 'Denis Suarez'},
{name: 'Coutinho'},
{name: 'Luis Suarez'},
{name: 'Lionel Messi'},
{name: 'Dembele'},
{name: 'Malcom'}
]
}
I import it to the component, assign to the state and displaying it in the component below.
我将它导入到组件中，分配给状态并显示在下面的组件中。
import React, {Component} from 'react';
import {connect} from 'react-redux';
class Barca extends Component{
constructor(props){
super(props);
this.state = {
players: this.props.players,
player: '' //empty to set as an input
}
}
onChange(e){
this.setState({
player: e.target.value
});
console.log(this.state.player);
}
renderList(){
return this.state.players.map((player) => {
return(
<tr key={player.name}>
<td>{player.name}</td>
</tr>
);
});
}
render(){
return(
<div className="col-sm-6 table-col table-responsive">
<input
type="text"
value={this.state.player}
onChange={this.onChange.bind(this)}
/>
<table className="table table-striped">
<thead>
<tr>
<th className="text-center">
FC Barcelona
</th>
</tr>
</thead>
<tbody>
{this.renderList()}
</tbody>
</table>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
players: state.reducerBarca
};
};
export default connect(mapStateToProps)(Barca);
List looks like that
列表看起来像这样
The problem is that I would like to filter my players list by the value from input. I have done some research here and I have only found filtering in Array, not like I have in Objects list.
问题是我想通过输入值过滤我的球员列表。我在这里做了一些研究，我只在Array 中找到了过滤，而不是像我在Objects list 中那样。
What I have done for now:
我现在所做的：
- displaying the players list
- Geting the value from the input and displaying it after every written letter
- How to render my list by the inputted term ???
- 显示球员名单
- 从输入中获取值并在每个写完的字母后显示它
- 如何通过输入的术语呈现我的列表？？？
Thank you all people ! I have removed the players state
谢谢大家！我已经删除了玩家状态
constructor(props){
super(props);
this.state = {
//players: this.props.players <-- Stupid thing
player: '' //empty to set as an input
}
}
and rewrite my renderList()function
并重写我的renderList()函数
return this.props.players.filter(player =>
player.name.toLowerCase().includes(this.state.player.toLowerCase())).map(searchedPlayers => {
return(
<tr key={searchedPlayers.name}>
<td>{searchedPlayers.name}</td>
</tr>
);
})
}
回答by Gavin Thomas
this.state.players.filter(player => player.name.includes(this.state.player))
And if you wanted to then map them instead of just filtering the state...
如果你想映射它们而不是仅仅过滤状态......
this.state.players.filter(player =>
player.name.includes(this.state.player)).map(searchedPlayers => {
return(
<tr key={searchedPlayers.name}>
<td>{searchedPlayers.name}</td>
</tr>
);
})
Note you can also render straight from props without setting to state, (to avoid re-renders every-time the user types) by replacing
请注意，您也可以直接从道具渲染而不设置为状态，（以避免每次用户键入时重新渲染）通过替换
this.state.players
with
和
this.props.players
回答by Bhojendra Rauniyar
You can use filter:
您可以使用过滤器：
renderList(){
const { player } = this.state
const { players } = this.props
// ignore user's typing case
const iPlayer = player.toLowerCase()
const filteredPlayers = players.filter(p =>
p.name.toLowerCase().includes(iPlayer)
)
// now, map to the filteredPlayers
回答by Gurpreet Singh
You don't need to use copy state to props, you can use this.props.playersas well.
你不需要使用复制状态到道具，你也可以使用this.props.players。
getPlayers() {
if(this.state.player) {
return this.state.players.filter(player => player.name.includes(this.state.player))
} else {
return this.state.players
}
}
Then you can call let collection = getPlayers();and map the players to html content.
然后您可以调用let collection = getPlayers();播放器并将其映射到 html 内容。
