过滤我的反应状态（对象数组）

Question

我有一个事件处理程序，旨在从有状态数组中过滤选定的项目。目前，它正在过滤数组中的所有内容，而不是预期的选择。

因此，当我单击一张卡的删除按钮时，两张/所有卡都会被删除，即使它们具有不同的 ID...

这就是我的组件的样子

顶级

import Favorites from "./Favorites";
import { Menu } from "./Menu";
import { useState } from "react";

import "./App.css";

function App() {
  const [favorite, setFavorite] = useState([]);
  const [array, setArray] = useState([
    {
      text: "Check 123",
      name: "Lahmacun",
      image: "src/lahmacun.jpeg",
      id: self.crypto.randomUUID(),
      liked: false,
    },
    {
      text: "Check 456",
      name: "Chicken",
      image: "src/chicken.webp",
      id: self.crypto.randomUUID(),
      liked: false,
    },
    {
      text: "Check 789",
      name: "Veggies",
      image: "src/vegan.jpeg",
      id: self.crypto.randomUUID(),
      liked: false,
    },
    {
      text: "Check 012",
      name: "Pho",
      image: "src/pho.jpeg",
      id: self.crypto.randomUUID(),
      liked: false,
    },
  ]);

  const handleLike = (card) => {
    setFavorite((prev) => [...prev, card]);
  };

  const handleUnlike = (id) => {
    console.log("removed");
    setFavorite(favorite.filter((item) => item.id == id));
  };

  return (
    <div id="app">
      <h1>Recipes To Try</h1>
      <form className="m-2" action="">
        <div className="row">
          <div className="col-3 ">
            <label className="form-label pt-2" id="searchBar">
              Find A Recipe
            </label>
          </div>
          <div className="col-md-7 col-5">
            <input
              //onChange={filterRecipes}
              type="text"
              className="form-control"
              id="searchBar"
              placeholder="Search"
            />
          </div>
          <div className="col-sm-1 col-2">
            <button type="submit" className="btn btn-primary" id="searchBtn">
              Search
            </button>
          </div>
        </div>
      </form>
      <Favorites favorite={favorite} handleUnlike={handleUnlike} />
      <Menu array={array} handleLike={handleLike} />
    </div>
  );
}

export default App;

最喜欢的组件

export default function Favorites({ favorite, handleUnlike }) {
  return (
    <>
      <div className="holder">
        <h3>Favorites</h3>
        <div id="favorites">
          {favorite.map((i) => (
            <div
              className="col col-md mb-3 mb-sm-0"
              key={self.crypto.randomUUID()}
            >
              <div className="card">
                <img src={i.image} alt="" className="card-img-top " />
                <div className="card-body">
                  <h5 className="card-title">{i.name}</h5>
                  <p className="card-text">{i.text}</p>
                  <a
                    onClick={() => handleUnlike(i)}
                    href="#"
                    className="btn btn-primary"
                  >
                    Remove
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

菜单组件

import { Cards } from "./Cards";

export function Menu({ array, handleLike }) {
  return (
    <div id="menu">
      <div className="row">
        <div className="col">
          <h3 className="">Ready for Testing</h3>
        </div>
      </div>
      <div className="row">
        <Cards array={array} handleLike={handleLike} />
      </div>
    </div>
  );
}

卡片组件

export function Cards({ array, handleLike }) {
  return (
    <>
      {array.map((i) => (
        <div className="col col-md mb-3 mb-sm-0" key={i.id}>
          <div className="card">
            <img src={i.image} alt="" className="card-img-top " />
            <div className="card-body">
              <h5 className="card-title">{i.name}</h5>
              <p className="card-text">{i.text}</p>
              <a
                onClick={() => handleLike(i)}
                href="#"
                className="btn btn-primary"
              >
                Add to Favorites
              </a>
            </div>
          </div>
        </div>
      ))}
    </>
  );
}

最后，如何根据搜索栏输入过滤菜单卡？

非常感谢💪

我希望只过滤一项，但两者都被过滤

Answer 1

问题是你传入的handleUnlike不是id而是对象。

<a onClick={() => handleUnlike(i)}
                href="#"
                className="btn btn-primary"
              >

改成这个就可以了

  <a onClick={() => handleUnlike(i.id)}
            href="#"
            className="btn btn-primary"
          >

问题的根源是对象的命名不正确 如果你给所有的东西一个有意义的名字，你会更容易发现这些错误。

而不是

{favorite.map((i) => (...))}

做

{favoriteRecipes.map((recipe) => (...))}