Javascript 使用按钮过滤对象数组

这里的新手正在寻求帮助。 这里是交易：我有一个由4个对象组成的数组（在我的

Data.js

文件中），点击一个按钮后，我只想在下面的示例中显示属于“category a”的项目。我对setState的使用有点困惑（我假设我需要它，因为我的按钮将“更新”初始状态，以仅反映我想要显示的数据（因此第1项和第4项）。 你知道怎么做吗？ 干杯

index.js

import React, {Component} from "react";
import ReactDOM from "react-dom";
import Data from "./Data.js";



class Root extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: Data,
        }
    }

myFunctionA = () => {
    // filtering in here
}
    
render() {
        return (
            <div>
                <button onClick={this.myFunctionA}>Click me to display item 1 & 4</button>
            </div>
            
        )
    }
}

ReactDOM.render(<Root />, document.getElementById("root"))

const Data = [
  {
    "id": 1,
    "name": "First item",
    "category": "A"
  },
  {
    "id": 2,
    "name": "Second item",
    "category": "B"
  },
  {
    "id": 3,
    "name": "Third item",
    "category": "C"
  },
  {
    "id": 4,
    "name": "Fourth item",
    "category": "A"
  },
]

export default Data

---

你是对的，你需要使用setState

试试这样：

myFunctionA = () => {
    const filteredData = this.state.items.filter(elem => elem.category === 'A');
    this.setState({ items: filteredData });
}

---

尝试使用

Data.filter（（item）=>[1,4].includes（item.id））

我猜它假设我知道数组中每个对象的位置。如果我不知道这些信息，它会工作吗？非常感谢！！如果我有第二个按钮（比如说过滤类别“B”），它会如何工作，有没有一种方法不必复制/粘贴整个代码，只需将a替换为B？我想知道的是，例如，4个或5个按钮（如果有几个段落几乎相同，会很混乱。最后一个问题是，如何在render（）方法中显示结果？我遇到了一个错误“对象作为React子对象无效”。但非常感谢，非常有用。不客气！要筛选其他类别，您需要向此函数传递一个参数，即

myfuncta=category=>{

然后将函数体中的

'A'

替换为

类别

。然后可以在单独的函数中使用它：

filterByCategoryA=（）=>this.myFunctionA（'A'）；

等。要在JSX中显示此数据，需要通过render方法中的数据进行映射，即

{this.state.items.map（el=>{el.name}}）

。请记住，在第一次单击后，您正在修改您的状态，因此您需要在筛选之前将此数据存储在某个位置。@AlexGlm您达到目标了吗？是的，我已经在帖子中回答了两次，感谢您的帮助，但都没有成功。但是，是的，谢谢您！AlexGlm我看到了您的两条评论，似乎它们都不见了耳朵