為什么當用戶在React中按下按鈕時UI組件不更新？

我正在構建一個專案并堆疊。我正在嘗試實作一個功能，該功能必須按類別過濾產品并在用戶按下類別按鈕時在 UI 中對其進行排序，因此當我按下按鈕時，陣列會更新，但 UI 組件不起作用并且我總是擁有相同的產品。我在這里做錯了什么？這是我的代碼：

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

function ItemsComponent() {
  const [items, setItems] = useState([]);
  const [search, setSearch] = useState("");
  const [filterItems, setFilterItems] = useState(items);

  // Fetching Data
  useEffect(() => {
    const fetchedData = async () => {
      try {
        const response = await fetch(`https://fakestoreapi.com/products`);
        const data = await response.json();
        console.log("Data", data);
        setItems(data);
      } catch (error) {
        console.log(error);
      }
    };
    fetchedData();
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
  };

  const filterProduct = (cat) => {
    const updatedList = items.filter((item) => item.category === cat);
    console.log("cat", cat);
    console.log("updated", updatedList);
    setFilterItems(updatedList);
  };

  return (
    <>
      <header>
        <div className="overlay">
          <h2>Welcome To E-Commerce Shop</h2>
        </div>
        <div className="search">
          <form onSubmit={handleSubmit}>
            <input
              type="text"
              placeholder="Search..."
              onChange={(e) => setSearch(e.target.value)}
            />
            <button className="btn-light btn-search">Search</button>
          </form>
        </div>
        <div className="categories">
          <button
            className="btn-dark category"
            onClick={() => setFilterItems(items)}
          >
            All
          </button>
          <button
            className="btn-dark category"
            onClick={() => filterProduct("men's clothing")}
          >
            Men's Clothing
          </button>
          <button
            className="btn-dark category"
            onClick={() => filterProduct("women's clothing")}
          >
            Women's Closing
          </button>
          <button
            className="btn-dark category"
            onClick={() => filterProduct("jewelery")}
          >
            Jewelry
          </button>
          <button
            className="btn-dark category"
            onClick={() => filterProduct("electronics")}
          >
            Electronics
          </button>
        </div>
      </header>
      <div className="display-grid">
        {Array.from(items)
          .filter((value) => {
            if (search === "") {
              return value;
            } else if (
              value.title.toLowerCase().includes(search.toLowerCase())
            ) {
              return value;
            }
          })
          .map((item) => (
            <div key={item.id}>
              <div className="card">
                <p className="title">{item.title}</p>
                <img src={item.image} />
                {/* <p className="description">{item.description}</p> */}
                <p className="price">￡ {item.price}</p>
                <button className="btn-dark btn-buy">
                  <a href="#" className="btn-link">
                    Buy Now
                  </a>
                </button>
              </div>
            </div>
          ))}
      </div>
    </>
  );
}

export default ItemsComponent;

這是我添加的螢屏截圖以更清晰。先感謝您。

uj5u.com熱心網友回復：

你沒有使用你的filterItems陣列。您可以通過在display-grid映射中使用它來修復它：

     <div className="display-grid">
        {Array.from(filterItems)
          .filter((value) => {
            if (search === "") {
              return value;
            } else if (
              value.title.toLowerCase().includes(search.toLowerCase())
            ) {
              return value;
            }
          })
          .map((item) => (
            <div key={item.id}>
              <div className="card">
                <p className="title">{item.title}</p>
                <img src={item.image} />
                {/* <p className="description">{item.description}</p> */}
                <p className="price">￡ {item.price}</p>
                <button className="btn-dark btn-buy">
                  <a href="#" className="btn-link">
                    Buy Now
                  </a>
                </button>
              </div>
            </div>
          ))}
      </div>

但是，當您將過濾器保存在狀態中而不是從處理程式創建的過濾后的陣列中時，您可能會使事情變得更加清晰。然后，您可以一次性過濾和搜索：

const filterProduct = (cat) => setFilter(cat);

{Array.from(items).filter(item => !filter || item.category === filter)
          .filter((value) => !search || value.title.toLowerCase().includes(search.toLowerCase()))
          .map((item) => (
            <div key={item.id}>
              <div className="card">
                <p className="title">{item.title}</p>
                <img src={item.image} />
                {/* <p className="description">{item.description}</p> */}
                <p className="price">￡ {item.price}</p>
                <button className="btn-dark btn-buy">
                  <a href="#" className="btn-link">
                    Buy Now
                  </a>
                </button>
              </div>
            </div>
          ))}

這是一個沙箱：https ://codesandbox.io/s/elated-bartik-hq0cs7?file=/src/App.js

uj5u.com熱心網友回復：

在您的箭頭函式“filterProduct”中，您正在使用“setFilterItems”更改“filterItems”，但在您使用“items”狀態呈現您的 ui。

嘗試使用“filterItems”來呈現您的資料

標籤：反应

上一篇：在React應用程式中使用.filter()過濾掉特定值

下一篇：未呈現空白/白色螢屏