Oye, tengo un pequeño problema en mi componente modal. El problema es el siguiente error: TypeError no detectado: meatState.map no es una función ¿Alguna idea de qué podría estar causando esto? Agradezco mucho la ayuda. Y también, meatState es de hecho una matriz.
Modal.js
import React, { useContext } from "react"; import showModal from "../store/meat-context"; import MeatContext from "../store/meat-context"; import CartItem from "./CartItem"; import styles from "./Modal.module.css"; function Modal() { const modal = useContext(showModal); const { meatState, dispatchMeatState } = useContext(MeatContext); if (!modal.showModal) { return null; } return ( <div className={styles.backdrop}> <div className={styles.modal}> {meatState.map((meat) => { return ( <CartItem name={meat.name} price={meat.price} id={meat.id} description={meat.description} /> ); })} </div> </div> ); } export default Modal;Como han dicho otros, meatState no must ser una matriz. podría ser nulo o indefinido. Puede agregar este código donde está el mapa para verificar si este es su problema.
{meatState !== undefined && meatState.map((meat) => { return ( <CartItem name={meat.name} price={meat.price} id={meat.id} description={meat.description} /> ); })}o Verifique el estado de la carne con useEffect() en su componente Modal.
useEffect(() => { console.log(meatState) }, [meatState])