Ok, básicamente estoy tratando de eliminar un objeto de una matriz por su id.
contexto-carne.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;el objetivo es eliminar un objeto a través de la acción "REMOVE_MEAT", pero de alguna manera la condición if (state[i].id == action.payload) aparentemente nunca se cumple y, por lo tanto, el objeto nunca se elimina. Las impresiones de console.log (estado)
[ { "name": "Sushi", "description": "Finest fish and veggies", "price": 22.99, "id": "m1" }, { "name": "Sushi", "description": "Finest fish and veggies", "price": 22.99, "id": "m1" } ]por ejemplo (después de hacer clic en eliminar)
y console.log(action.payload) imprime
{ "id": "m1" }la condición debe cumplirse, pero nunca se ejecuta console.log(state[i].id) ni el resto del cuerpo de la condición. ¿Alguna idea?
Su condición es state[i].id == action.payload , donde state[i].id siempre es una string y action.payload siempre es un objeto con forma de
{ id: string } La condición siempre es falsa ya que ninguna cadena será estrictamente igual a un objeto. Deberá escribir state[i].id == action.payload.id en su lugar para comparar los id.