如何使用 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

If-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>
      )
    );
}

但是可以看出，过滤器后的所有内容都是相同的，并不是很 DRY。您可以在过滤功能和地图中同时做选项卡和项目类型。

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>
      )
    );
}

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

How to filter data from an array and display it accordingly using ReactJs

arrays

tabs

reactjs

react-redux