通过其 ID react.js 从数组中删除一个 object

Question

好的，所以基本上我正在尝试通过其 ID 从数组中删除一个 object。

肉上下文.js

import React, { useReducer, useState } from "react";

const MeatContext = React.createContext({ meatState: [] });

export function MeatContextProvider(props) {
  const meatReducer = (state, action) => {
    if (action.type === "ADD_MEAT") {
      return [...state, action.payload];
    }
    if (action.type === "REMOVE_MEAT") {
      for (var i = 0; i < state.length; i++) {
        if (state[i].id == action.payload) {
          console.log(state[i].id);

          state.splice(i, 1);
          break;
        }
        console.log(state);
        console.log(action.payload);
        return state;
      }
    }
    return [];
  };

  const [meatState, dispatchMeatState] = useReducer(meatReducer, []);
  const [showModal, setShowModal] = useState(false);

  if (showModal) {
    document.body.style.overflow = "hidden";
  }

  return (
    <MeatContext.Provider
      value={{
        meatState: meatState,
        dispatchMeatState: dispatchMeatState,
        showModal: showModal,
        setShowModal: setShowModal,
      }}
    >
      {props.children}
    </MeatContext.Provider>
  );
}
export default MeatContext;

目标是通过操作“REMOVE_MEAT”删除 object，但不知何故，条件 if (state[i].id == action.payload) 显然从未满足，因此 object 永远不会被删除。 console.log(state) 打印

[
    {
        "name": "Sushi",
        "description": "Finest fish and veggies",
        "price": 22.99,
        "id": "m1"
    },
    {
        "name": "Sushi",
        "description": "Finest fish and veggies",
        "price": 22.99,
        "id": "m1"
    }
]

例如（点击删除后）

和 console.log(action.payload) 打印

{
    "id": "m1"
} 

然后应该满足条件，但永远不会运行 console.log(state[i].id) 也不会运行条件体的 rest。 任何想法？

Answer 1

您的条件是state[i].id == action.payload ，其中state[i].id始终是一个string ，而action.payload始终是一个 object 形状像

{
    id: string
}

条件始终为假，因为没有字符串严格等于 object。 您需要编写state[i].id == action.payload.id来比较 ID。