react 地区筛选_在React中根据类别作为类名筛选文章

我有一个过滤函数的问题,我不知道下一步该怎么做。

我正在尝试实现一个过滤功能,我列出所有不同的类别作为我的帖子按钮,然后能够点击“全部显示”或一个特定的类别按钮切换显示/隐藏的帖子。

所有的帖子都将category slug作为className,切换按钮也将category slug作为className,但是我不确定如何让它与过滤一起工作。

代码是这样的:

import React, { Component } from 'react';

import { Config } from "../config.js";

import {Grid, List} from "./Icons.js";

import Link from "next/link";

class AllTjansterList extends Component {

constructor() {

super();

this.state = {

tjanster: [],

categories: [],

};

}

componentDidMount() {

let tjansterURL = `${Config.apiUrl}/wp-json/wp/v2/tjanster/?_embed`

fetch(tjansterURL)

.then(res => res.json())

.then(res => {

this.setState({

tjanster: res

})

})

let catURL = `${Config.apiUrl}/wp-json/wp/v2/categories/?_embed`

fetch(catURL)

.then(res => res.json())

.then(res => {

this.setState({

categories: res

})

})

}

render() {

let tjanster = this.state.tjanster.map((tjanster, index) => {

for (var i = 0; i < tjanster._embedded['wp:term'][0].length; i++) {

let cat = tjanster._embedded['wp:term'][0][i].name;

let catSlug = tjanster._embedded['wp:term'][0][i].slug;

return

{tjanster.title.rendered}

}

});

let categories = this.state.categories.map((categories, index) => {

if (categories.count !== 0) {

return {categories.name}

}

});

return (

Show all

{categories}

{tjanster}

)

}

}

export default AllTjansterList;