1

Espero de su amable apoyo, estoy realizando un proyecto de ecommerce con react js usando hoocks, mi problema radica en que tengo que mostrar los productos consumiendo un api externo pero no he logrado hacer que se muestre productos al iniciar o al entrar a la aplicación web.

Estoy tratando de incorporar el llamado de la api en app.js ya que entiendo que es el componente que carga después del index.js.

import './App.css';
import React, { Component }  from 'react';
import Navbar from "./components/Navbar";
import Products from "./components/Products";
import CheckoutPage from "./components/CheckoutPage";
import ModalProduct from "./components/ModalProduct";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import SignIn from "./components/Signin";
import SignUp from "./components/Signup";
import {useEffect} from "react";
import { auth } from "./firebase";
import Checkout from "./components/CheckoutForm/Checkout";
import { useStateValue } from "./StateProvider";
import { actionTypes } from "./reducer";
import axios from 'axios';
import { API } from "./constants/userConstants";


function App() {

  const [{productData},dispatch] = useStateValue();
  const listProducts = async  ()=> {
      try{
        const {data}  = await axios.get(API+ '/api/products'); 
          console.log(data);          
            dispatch({
              type: actionTypes.SET_PRODUCT_DATA,
              productData: data,
            });      
      }catch(error){
        alert(error);
      }
   }

 listProducts();
  return (
      <Router>
        <div className="App">
          <Navbar/>
          <Switch>
            <Route path="/createProduct">
              <ModalProduct />
            </Route>
            <Route path="/checkout">
              <Checkout />
            </Route>
            <Route path="/signup">
              <SignUp />
            </Route>
            <Route path="/signin">
              <SignIn />
            </Route>
            <Route path="/checkout-page">
              <CheckoutPage />
            </Route>
            <Route path="/">
              <Products />
            </Route>
          </Switch>
        </div>
      </Router>
  );
}

export default App;

Ahora bien lo que intenté hacer es llamar al api y llenar la información devuelta usando reducer y asi poder usar la variable en la js de products.

import React,{useState,useEffect} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Product from "./Product";
import products from "../product-data";
import axios from 'axios';
import { API } from "../constants/userConstants";
import { useStateValue } from "../StateProvider";
import { actionTypes } from "../reducer";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    padding: theme.spacing(2),
  },

}));

export default function Products() {
  const classes = useStyles(); 
  const [{productData},dispatch] = useStateValue();      

  return (
    <div className={classes.root} >      
      <Grid container spacing={2}>
        {
          productData.map(product=>(
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Product key={product._id} product={product}/>
          </Grid>))
        }
      </Grid>
    </div>
  );
}

Más sin embargo aquí me salta un error de TypeError: Cannot read property 'map' of null entiendo que productData es nulo, como puedo solventar este problema? ya que me está trayendo información al pasar por app.js

introducir la descripción de la imagen aquí

Gracias por el apoyo.

1 respuesta 1

1

Creo que es importante que entiendas bien el ciclo de vida de React, y en especial el hook useEffect, que es clave para lo que te está pasando. No veo que esté usando useEffect (aunque lo tienes importado). La llamada a la API que obtiene los datos debería ir en ese hook (da igual que sea en el App o en cualquier componente hijo). Algo así:

useEffect(()=>{
//API Call
}, []);

Con esto, cuando tu componente se cargue completamente hará la llamada (en este hook se combinan el componentDidMount() y el componentDidUpdate() que existen en los componentes de clase).

Además, en tu objeto inicial que le pasas al reducer el estado productData debería ser un array vacío para evitar ese map of undefined. Otra opción es comprobar antes de hacer el map que el estado tiene valor con un simple && o con el null propagation operator:

{
   productData && productData.map(product=>(
   <Grid item xs={12} sm={6} md={4} lg={3}>
     <Product key={product._id} product={product}/>
   </Grid>))
}

ó

{
   productData?.map(product=>(
   <Grid item xs={12} sm={6} md={4} lg={3}>
     <Product key={product._id} product={product}/>
   </Grid>))
}
2
  • Gracias justo ese hoock estaba viendo, más sin embargo no me queda claro cuando se ejecuta y cual es su funcionamiento.
    – Omar
    Commented el 26 abr. 2021 a las 17:16
  • En la documentación lo explican bien. Te dejo aquí un ejemplo sencillo con una llamada a una API y un useEffect (he utilizado useState para el manejo del estado en vez de useReducer por simplicidad). stackblitz.com/edit/react-lg8xkz?file=src%2FApp.js
    – Kiko_L
    Commented el 27 abr. 2021 a las 5:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.