Estoy tratando de mostrar mis datos de una matriz. La matriz proviene de un reductor. Quería hacerlo usando el método .map pero hay un error (en produit.map). No sé por qué, pero me devuelve "Error no detectado: los objetos no son válidos como un niño React". La consola también me dice que encontraron Objetos con llaves. ¿Puede alguien ayudarme por favor?
const LastProduit = () => { const dispatch = useDispatch(); const step = 3; const [count, setCount] = useState(step); useEffect(() => { dispatch(getProduit()); }, [dispatch,]); const { height, width } = useWindowDimensions(); const produits = useSelector((state) => state.produitReducer); const produitsArray = produits; const RealProduitArray = produitsArray[0]; console.log(produits); console.log(RealProduitArray); //console.log(RealProduitArray[0].titre); const a = [produits]; const b = 1 + produits.length for (let i = 0; i < b; i++) { return a[i]; } let screenwidth = { width }; let nbr = 0; let nbrspace = 0; let valeur = "true"; console.log(screenwidth.width); if (screenwidth.width <= 768) { nbr = 2; nbrspace = -60; valeur = "false" } else { nbr = 4; nbrspace = -170; } return ( <div className='LastProduit'> <p className='categories_titre'>Derniers Produits </p> <div className='LastProduit_img'> <Swiper modules={[Navigation, Pagination, Scrollbar, A11y]} spaceBetween={nbrspace} slidesPerView={nbr} navigation pagination={{ clickable: true }} scrollbar={{ draggable: true }} onSwiper={(swiper) => console.log(swiper)} onSlideChange={() => console.log('slide change')} > {produits.map((produit) => <SwiperSlide> <Produit produit={produit} key={produit._id} /> </SwiperSlide> )} </Swiper> </div> </div> );};
Su función de mapa necesita una declaración de retorno. En las funciones de devolución de llamada de varias líneas, debe incluir la palabra clave de return .
Ejemplo:
{ produits.map((produit) => { return ( <SwiperSlide> <Produit produit={produit} key={produit._id} /> </SwiperSlide> ) }) }