Блог

Я хочу фильтровать свои данные и динамически отображать отфильтрованные данные в зависимости от того, какая кнопка нажата. Мой подход состоял в том, чтобы создать переменную и обновить ее при нажатии кнопки и передать эту переменную в функцию фильтра, однако у меня это не работает. Есть идеи? Вот фрагмент:

 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>
))}
 

Я собрал рабочий пример. Вам необходимо сохранить текущий выбор в состоянии:

 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>
        ))}
    </>
  );
}
 

PageID должно быть объявлено как состояние, чтобы быть реактивным, затем используйте его для обновления внутри обработчика нажатия кнопки :

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