如何使用ReactJs过滤数组中的数据并相应地显示它

Question

如何根据数组中可用的project_type显示我的card Item。

例如，如果type是Reactjs，它将显示在第一个选项卡中，否则显示在第二个选项卡中。使用projects.filter(project => project.project_type === "Reactjs"的东西关于我需要在这里做什么，有什么建议吗？

//project.js

class Projects extends Component{
constructor(props){
super(props);
this.state={activeTab: 0};
}
static propTypes = {
getProject: PropTypes.func.isRequired,
deleteProject: PropTypes.func.isRequired,
resume: PropTypes.object.isRequired,
isAuthenticated: PropTypes.bool,
auth: PropTypes.object.isRequired,
loading: PropTypes.object.isRequired
}
componentDidMount() {
this.props.getProject();
}
onDeleteProjectClick = (id) => {
this.props.deleteProject(id);
};
toggleCategories(projects, user){
if(this.state.activeTab === 0 &&projects.filter(project => project.project_type === "Reactjs" ){
return (
<div>
{projects.map(({ _id, project_type, project_name, project_description, project_link, project_image_link }) => (
<Grid key={_id} timeout={100} className="projects-grid" > 
<Card shadow={5} className="cards-grid">
<CardTitle style={{color:'#fff', height:'176px', background:"url("") center/cover"}}>{project_name}</CardTitle>
<CardText>
{project_description}
</CardText>
<CardActions border>
<Button colored><a href={project_link} target="_blank">Live</a></Button>
<Button colored><a href="" target="_blank">Github</a></Button>
</CardActions>
</Card>
</Grid>
))}
</div>
)
}else if(this.state.activeTab === 1 && projects.filter(project => project.project_type === "Html" ){
return(
<div>
{projects.map(({ _id, project_type, project_name, project_description, project_link, project_image_link }) => (
<Grid key={_id} timeout={100} className="projects-grid" > 
<Card shadow={5} className="cards-grid">
<CardTitle style={{color:'#fff', height:'176px', background:"url("") center/cover"}}>{project_name}</CardTitle>
<CardText>
{project_description}
</CardText>
<CardActions border>
<Button colored><a href={project_link} target="_blank">Live</a></Button>
<Button colored><a href="" target="_blank">Github</a></Button>
</CardActions>
</Card>
</Grid>
))}
</div>
)
} 
}
render(){
const { projects, loading} = this.props.resume;
const { user } = this.props.auth;
return(
<Container>
{loading ? (
<div><Loading/></div>) : 
( <div className="category-tabs">
<Tabs activeTab ={this.state.activeTab} onChange={(tabId) => this.setState({activeTab: tabId})} ripple>
<Tab> React/Node </Tab>
<Tab> HTML/CSS/JS </Tab>
</Tabs>
<Grid >
<Cell col={12}>
{this.toggleCategories(projects, user)}
</Cell>
</Grid>
</div> )}
</Container>
)
}
}

const mapStateToProps = (state) => ({
resume: state.resume,
isAuthenticated : state.auth.isAuthenticated,
auth: state.auth,
loading: state.apiCallsInProgress > 0
});
export default connect(mapStateToProps, {getProject, deleteProject }) (Projects);

//JSOn阵列

[
{
"_id": "5e9b2ca0e02bb43b2c3dee9c",
"project_type": "Html",
"project_name": "abc",
"project_description": "abc",
"project_link": "example.com",
"project_image_link": "example.com",
"date": "2020-04-18T16:36:48.902Z",
"__v": 0
},
{
"_id": "5e9b2c91e02bb43b2c3dee9b",
"project_type": "Reactjs",
"project_name": "abc",
"project_description": "abc",
"project_link": "example.com",
"project_image_link": "example.com",
"date": "2020-04-18T16:36:33.901Z",
"__v": 0
}
]

Answer 1

如果在活动选项卡上为else，则相应地过滤和映射。

toggleCategories(projects, user) {
if (this.state.activeTab === 0) {
return projects
.filter(project => project.project_type === "Reactjs")
.map(
({
_id,
project_type,
project_name,
project_description,
project_link,
project_image_link
}) => (
<Grid key={_id} timeout={100} className="projects-grid">
<Card shadow={5} className="cards-grid">
<CardTitle
style={{
color: "#fff",
height: "176px",
background: 'url("") center/cover'
}}
>
{project_name}
</CardTitle>
<CardText>{project_description}</CardText>
<CardActions border>
<Button colored>
<a href={project_link} target="_blank">
Live
</a>
</Button>
<Button colored>
<a href="" target="_blank">
Github
</a>
</Button>
</CardActions>
</Card>
</Grid>
)
);
}
return projects
.filter(project => project.project_type === "Html")
.map(
({
_id,
project_type,
project_name,
project_description,
project_link,
project_image_link
}) => (
<Grid key={_id} timeout={100} className="projects-grid">
<Card shadow={5} className="cards-grid">
<CardTitle
style={{
color: "#fff",
height: "176px",
background: 'url("") center/cover'
}}
>
{project_name}
</CardTitle>
<CardText>{project_description}</CardText>
<CardActions border>
<Button colored>
<a href={project_link} target="_blank">
Live
</a>
</Button>
<Button colored>
<a href="" target="_blank">
Github
</a>
</Button>
</CardActions>
</Card>
</Grid>
)
);
}

但是可以看出，过滤器之后的所有东西都是相同的，并且不是很干燥。您可以在筛选函数和映射中同时执行选项卡和项目类型。

toggleCategories(projects, user) {
return projects
.filter(project =>
this.state.activeTab === 0
? project.project_type === "Reactjs"
: project.project_type === "Html"
)
.map(
({
_id,
project_type,
project_name,
project_description,
project_link,
project_image_link
}) => (
<Grid key={_id} timeout={100} className="projects-grid">
<Card shadow={5} className="cards-grid">
<CardTitle
style={{
color: "#fff",
height: "176px",
background: 'url("") center/cover'
}}
>
{project_name}
</CardTitle>
<CardText>{project_description}</CardText>
<CardActions border>
<Button colored>
<a href={project_link} target="_blank">
Live
</a>
</Button>
<Button colored>
<a href="" target="_blank">
Github
</a>
</Button>
</CardActions>
</Card>
</Grid>
)
);
}