React新手求助：点击按钮过滤对象数组展示指定分类项

嘿，别担心，这其实挺容易搞定的！我来一步步帮你实现需求：

首先你当前的代码只添加了触发按钮，但还没把数据渲染到页面上，而且需要通过setState来更新组件状态，让React自动重新渲染筛选后的内容。

完整修改方案 #

我会把状态拆分成原始数据和显示数据（这样以后想恢复全部内容也很方便），然后实现筛选逻辑：

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 = {
      // 保存原始数据，避免筛选后丢失
      originalItems: Data,
      // 控制页面显示的条目，初始展示全部数据
      displayedItems: Data,
    }
  }

  myFunctionA = () => {
    // 使用数组filter方法筛选出category为"A"的条目
    const filteredItems = this.state.originalItems.filter(item => item.category === "A");
    // 通过setState更新状态，触发组件重新渲染
    this.setState({ displayedItems: filteredItems });
  }

  render() {
    return (
      <div>
        <button onClick={this.myFunctionA}>Click me to display item 1 & 4</button>
        {/* 渲染筛选后的条目列表 */}
        <ul style={{ marginTop: "1rem" }}>
          {this.state.displayedItems.map(item => (
            <li key={item.id}>
              {item.name} (分类: {item.category})
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

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

关键步骤解释 #

• 状态拆分：把originalItems作为原始数据仓库，displayedItems控制页面显示内容，这样即使筛选后也能随时恢复全部数据（比如加个"显示全部"按钮）。
• 筛选逻辑：filter方法会返回一个新数组，只保留category等于"A"的元素——React要求状态更新时不能直接修改原数组，必须返回新的引用，filter刚好满足这个要求。
• setState的作用：调用this.setState后，React会检测到状态变化，自动重新执行render方法，用新的displayedItems渲染页面，这样点击按钮后就只会显示条目1和4了。

简化版（不需要保留原始数据） #

如果确定点击按钮后不需要再展示其他条目，也可以简化状态：

// 简化后的构造函数和筛选方法
constructor(props) {
  super(props);
  this.state = {
    items: Data,
  }
}

myFunctionA = () => {
  const filteredItems = Data.filter(item => item.category === "A");
  this.setState({ items: filteredItems });
}

// render里渲染this.state.items即可

内容的提问来源于stack exchange，提问作者Alex Glm