React 从状态数组中删除所有条目，而不是使用 filter()

Question

正如标题所述，我的反应代码遇到了问题，每当我尝试从数组中删除一个项目时，它都会完全清除状态（回到[]）

我当前的代码如下所示：

import { useState } from "react";

// Berries Container
export function Berries({
  filterOptions,
  selectedBerries,
  setSelectedBerries,
}) {
  // set our active berry, this is just for css styling to allow the berry to be toggled on or off
  const [activeBerry, setActiveBerry] = useState(false);

  let berries = [];

  const deleteItem = (name) => {
    setSelectedBerries((selectedBerries) =>
      selectedBerries.filter((item) => item.name === name)
    );
  };

  function handleActiveBerry(e) {
    // toggles the berry on or off
    setActiveBerry((activeBerry) => !activeBerry);
    if (!activeBerry) {
      setSelectedBerries([...selectedBerries, e]);
    }
    if (activeBerry) {
      deleteItem(filterOptions.name);
    }
  }

  return (
    <div className="filter-berries-item">
      <ul className={!activeBerry ? "berries" : "berries-activated"}>
        <img
          value={filterOptions.name}
          onClick={() => handleActiveBerry(filterOptions.name)}
          src={filterOptions.image}
          width={20}
          height={20}
        />
      </ul>
    </div>
  );
}

过滤器选项是一个传入的对象，现在我试图在单击该项目时将 name 属性附加到列表（切换为 true），并在再次单击该项目时将其删除（切换为 false）

到目前为止，我已经尝试了一些选项，包括使用上面创建的deleteItem 函数。这是在另一个类似的问题中提出的，但没有奏效。

Edit1：我也尝试过

selectedBerries.filter((item) => item.name === name))

，但它根本不删除条目

编辑2：

filterOptions 几乎是一个像这样结构的对象

export const testFilter = {
  berries: [
    {
      id: 1,
      name: "belue",
      get image() {
        return belue;
      },
    },
}

并通过道具传承下来。然后，我获取名称并将其添加为处理活动浆果和删除项目的参数

Answer 1

找到了我的问题的答案。需要在回调函数上使用语法和参数的更改。

最初我尝试这样做，通过选择和错误的语法过滤浆果，但没有返回。但在尝试将其转换为集合并意识到我需要纠正我的语法之后..

  const deleteItem = (name) => {
    setSelectedBerries((selectedBerries) =>
      selectedBerries.filter((item) => item.name === name)
    );
  };

我把它从那个改为这个：

  const deleteBerries = (berryName) => {
    setSelectedBerries((selectedBerries) =>
      selectedBerries.filter((selectedName) => {
        return selectedName !== berryName;
      })
    );
  };