根据按钮 ID 进行过滤

Question

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

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>

))}

Answer 1

我整理了一个工作示例。您需要将当前选择存储在状态中：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>        ))}    </>  );}

Answer 2

PageID应将其声明为状态以便具有反应性，然后使用它的设置器在按钮单击处理程序内进行更新：const { PageID,setPageID} = React.useState('0')const showPage = (event) =>{setPageID(event.target.id)}