Javascript 基于按钮ID的过滤器

我想过滤我的数据，并根据单击的按钮动态显示过滤后的数据。我的方法是创建一个变量，并在按下按钮时进行更新，然后将该变量传递给filter函数，但是，这对我不起作用。有什么想法吗？ 以下是一个片段：

var PageID = "0"
const showPage = (event) =>{
PageID = event.target.id
}

<button id = "1" onClick = {showPage}>1</button>
<button id = "2" onClick = {showPage}>2</button>
<button id = "3" onClick = {showPage}>3</button>
<button id = "4" onClick = {showPage}>4</button>
<button id = "5" onClick = {showPage}>5</button>

{data.pages.filter(page => page.id == PageID).map(filteredid =>(
  <li>
    <div className="description_box">
      <img src={filteredid.products[0].img}/>
      <h2>{filteredid.products[0].title}</h2>
      <p>{filteredid.products[0].description}</p>
    </div>
  </li>
))}

PageID应声明为状态，以便反应，然后使用it setter在按钮单击处理程序内更新：

const { PageID,setPageID} = React.useState('0')
const showPage = (event) =>{
setPageID(event.target.id)
}

我整理了一份工作。您需要将当前选择存储在以下状态：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [pageId, setPageId] = useState("0");

  const showPage = (event) => {
    setPageId(event.target.id);
  };

  const data = {
    pages: [
      {
        id: "1",
        products: [
          { img: "test", title: "Title 1", description: "Description 1" },
          { img: "test", title: "Title 2", description: "Description 2" }
        ]
      }
    ]
  };

  return (
    <>
      <button id="1" onClick={showPage}>
        1
      </button>
      <button id="2" onClick={showPage}>
        2
      </button>
      <button id="3" onClick={showPage}>
        3
      </button>
      <button id="4" onClick={showPage}>
        4
      </button>
      <button id="5" onClick={showPage}>
        5
      </button>

      {data.pages
        .filter((page) => page.id === pageId)
        .map((filteredid) => (
          <li>
            <div className="description_box">
              <img src={filteredid.products[0].img} />
              <h2>{filteredid.products[0].title}</h2>
              <p>{filteredid.products[0].description}</p>
            </div>
          </li>
        ))}
    </>
  );
}

---

作为跟进，您将如何映射过滤页面中的所有产品？我不理解这个问题。看起来您已经在将产品映射到li元素。