Me había confundido con este tipo de error a pesar de que había usado los productos de autovariable para mostrar todos mis productos, pero cuando intento usarlo nuevamente, no puedo detectarlo. Obtuve esa variable llamando a Axios por redux. por qué no lo sabía: así que este es mi código:
import React, {useEffect} from "react"; import Product from "../components/Product"; import LoadingBox from "../components/LoadingBox"; import AlertBox from "../components/AlertBox"; import {useSelector, useDispatch} from "react-redux"; import {listProducts} from "../actions/productAction"; const HomePage = () => { const dispatch = useDispatch(); useEffect(()=> { dispatch(listProducts()); }, [dispatch]) const productsList = useSelector((state) => state.productsList); const {products, loading, error} = productsList; console.log(products) const categories = products.map((x)=> x.subCategory); console.log(categories) return ( <div> {loading? (<LoadingBox></LoadingBox>):error? (<AlertBox variant="danger" >{error}</AlertBox>):( <div className="row center" > { products.map((product) => ( <Product key={product._id} product={product} ></Product> ))} </div> )} </div> ) }; export default HomePage;La función map solo se usa para iterar una matriz. Si se envía cualquier otro tipo de datos a los productos, use la siguiente excepción para no producir un bloqueo o error.
Sintaxis
array.map((item, index) => { //code })Su representación
<div className="row center" > {products?.map((product) => ( <Product key={product._id} product={product} ></Product> ))} </div>Apuesto a que inicializa su tienda state.productsList con null , por lo tanto, debe verificar si los productos realmente se obtuvieron o proporcionar un valor predeterminado para productsList .
const categories = products?.length ? products.map(({subCategory})=> subCategory) : [];Lo que te falta es un cortocircuito. Cuando usa redux thunk como un middleware o cualquier forma asincrónica de obtener los datos del servidor, entonces debe asegurarse de que se encuentre cada nodo del objeto que desea representar. Se debe a que en los primeros milisegundos los datos aún no se han obtenido, pero la reacción tiende a generar los datos que, obviamente, serán nulos o indefinidos, ya que los datos aún no se han obtenido.
Esto se puede resolver de dos maneras diferentes con un cortocircuito.
1. Pase el nodo más profundo o asegúrese de que la longitud de los productos no sea 0 pasándolo en una matriz de dependencia como:
useEffect(()=> { dispatch(listProducts()); }, [dispatch,products?.length])2.
{products?.products.map((product) => ( <Product key={product._id} product={product} ></Product> ))}para obtener más referencias, puede consultar: evaluación de cortocircuitos en javascript