Javascript 使用钩子从没有唯一值的对象列表中移除对象

我想通过点击删除图标从我的列表中删除对象，但按照我的逻辑，要么所有内容都从列表中删除，要么什么都不删除，我不知道在没有对象ID的情况下该怎么做，我没有任何独特的东西，我有点不知所措。 在使用状态下呈现尽可能多食物的成分：

 {cartFood.map((food) => {
    return (
      <CartFood
         key={Math.random()}
         foodName={food.foodName}
         foodPrice={food.foodPrice}
         numberOfPortions={food.numberOfPortions}
         cartFood={cartFood}
         setCartFood={setCartFood}
      />
    );
 })}

• 将项目的索引作为

  id

  放入数组中。把它作为你的身份证传递

{cartFood.map（（食物，索引）=>{
返回(
);
})}

• 使用id移除食物

const CartFood=({
食品名称，
食品，
数份,，
手推车食品，
食物，
身份证件
}) => {
const handleRemoveFood=（）=>{
setCartFood（cartFood.filter（（el）=>el.id！==id））；
};
返回(
{foodName}

x{numberOfParties}

{foodPrice}kn



);
};

类似的方法应该可以：

const handleRemoveFood=（obj）=>{
setCartFood（（oldList）=>oldList.filter（（item）=>item.foodName！==obj.foodName））；
};

您的按钮（图标）应使用当前对象数据（obj）调用此函数

一个工作示例：

从我在中看到的：

只需将

food.\u id

传递到

FoodCard

，以便在您想从购物车中添加或删除物品时访问它：

FoodList.js

CartFood.js

工作示例：

您可以将

useReducer

与

useContext

一起使用，这样您就不必在每个级别手动传递道具，请查看更多信息

您不需要将

cartFood

作为一个属性传递，因为您可以使用：

---

陛下我想我弄糟了一些东西，因为你的解决方案应该有效，但购物车上的所有东西都被删除了，不仅仅是那个特定的项目…是的，我试图建议编辑，但我不能，因为它只是一个字符，问题仍然存在，所有东西都从购物车上删除了，不仅仅是特定的项目，我可能弄糟了其他东西吗？也许我需要传播一些东西吗？再检查一遍，代码应该能用。我已经更新了。您需要检查作为筛选函数中的道具的id。让我们来看看。@PrateekThapa如果项的顺序可能会改变，则不建议对键使用索引：您认为这是

const[cartFood，setCartFood]=useState（[]）或其他什么？只要列表项不是太大，而且列表很长，您也可以将列表项作为字符串进行比较：cartFood.filter（（el）=>JSON.stringify（el）！==JSON.stringify（cartFood））我用@pratek的解决方案更新了我的代码，我可以在这里显示的函数上使用id吗？我尝试过，仍然没有发生任何事情，特定的物品仍然留在购物车中，我不知道怎么了……嗯……我在codesandbox上打开了您的示例，但当我想从购物车中删除物品时，什么都没有发生：/p.s.感谢您的文章，我会仔细阅读的
const CartFood = ({
  foodName,
  foodPrice,
  numberOfPortions,
  cartFood,
  setCartFood,
}) => {
  const handleRemoveFood = () => {
    setCartFood(
      cartFood.filter(
        (el) =>
          el.foodName &&
          el.foodPrice !== cartFood.foodName &&
          cartFood.foodPrice
      )
    );
  };

  return (
    <div className='cartFood-container'>
      <p>{foodName}</p>
      <p>x{numberOfPortions}</p>
      <p>{foodPrice}kn</p>
      <p>
        <MdDeleteForever
          className='cartFood__icon'
          onClick={handleRemoveFood}
        />
      </p>
    </div>
  );
};

export default CartFood;

[{
  foodName: "Njoki with sos"
  foodPrice: 35
  numberOfPortions: 1
}, 
{
  foodName: "Chicken Wingos"
  foodPrice: 45
  numberOfPortions: 2
}]

 {cartFood.map((food, index) => {
              return (
                <CartFood
                  key={index}
                  id={index}
                  foodName={food.foodName}
                  foodPrice={food.foodPrice}
                  numberOfPortions={food.numberOfPortions}
                  cartFood={cartFood}
                  setCartFood={setCartFood}
                />
              );
            })}

const CartFood = ({
  foodName,
  foodPrice,
  numberOfPortions,
  cartFood,
  setCartFood,
  id,
}) => {
  const handleRemoveFood = () => {
    setCartFood(cartFood.filter((el) => el.id !== id));
  };

  return (
    <div className='cartFood-container'>
      <p>{foodName}</p>
      <p>x{numberOfPortions}</p>
      <p>{foodPrice}kn</p>
      <p>
        <MdDeleteForever
          className='cartFood__icon'
          onClick={handleRemoveFood}
        />
      </p>
    </div>
  );
};


const foodList = (typeOfList) =>
  typeOfList.map(food => {
    return (
      <FoodCard
        key={food._id}
        foodId={food._id}
        foodName={food.title}
        foodPrice={food.price}
        foodPic={food.image}
        setCartFood={setCartFood}
        cartFood={cartFood}
      />
    );
  });

const handleAddToCard = () => {
    setCartFood([
      ...cartFood,
      {
        foodId,
        foodName,
        foodPrice,
        numberOfPortions,
      },
    ]);
  };

const handleRemoveFood = () => {
    setCartFood(cartFood => cartFood.filter((el) => el.foodId !== foodId));
  };

setCartFood(cartFood => [
      ...cartFood,
      {
        foodId,
        foodName,
        foodPrice,
        numberOfPortions,
      },
    ]);