0

Al momento de consumir la api, el objeto DATA, llega correctamente. Como se ve por consola.

Pero luego al actualizar el navegador, sale el famoso error TypeError: Cannot read property 'map' of undefined y tambien deja de mostrar por consola el objeto que llega.

Cuando dentro de los Fragment comienzo con el mapeo del {results}=data. me tira el error.

Utilizo un Hook personalizado con axios para hacer la peticion a la api, que llega bien.

Es problema del hook personalizado? Estoy recorriendo mal el results?

Error completo ----> ×

TypeError: Cannot read property 'map' of undefined
Home
C:/Users/guido/Desktop/Proyectos/reactproyectos/comercio/src/components/Home/Home.js:14
  11 |    return ( <>
  12 |    
  13 |        <Container>
> 14 |            <Row>   
     | ^  15 |           
  16 |           { results.map(({name,url}) =>(
  17 | 
View compiled
▶ 17 stack frames were collapsed.
Module.<anonymous>
C:/Users/guido/Desktop/Proyectos/reactproyectos/comercio/src/index.js:7
   4 | import App from './App';
   5 | import reportWebVitals from './reportWebVitals';
   6 | 
>  7 | ReactDOM.render(
   8 |   <React.StrictMode>
   9 |     <App />
  10 |   </React.StrictMode>,
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:1230:30
__webpack_require__
C:/Users/guido/Desktop/Proyectos/reactproyectos/comercio/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
C:/Users/guido/Desktop/Proyectos/reactproyectos/comercio/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:1488:18
__webpack_require__
C:/Users/guido/Desktop/Proyectos/reactproyectos/comercio/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
checkDeferredModules
C:/Users/guido/Desktop/Proyectos/reactproyectos/comercio/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
C:/Users/guido/Desktop/Proyectos/reactproyectos/comercio/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:69
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

Por consola, llega la peticion a la api

Imagen del codigo

2
  • 1
    Hola buen día, para que tu pregunta sea mejor recibida y se te pueda ayudar, te invito a que veas Cómo preguntar, y que el codigo lo agregues como texto, no como imagen. el 27 nov. 2020 a las 2:18
  • Muchas gracias por tu ayuda. para la proxima lo tendre en cuenta!!! el 30 nov. 2020 a las 3:35

1 respuesta 1

4

Lo mas probable es que tu componente este cargando antes de que tu request a API sea completado por lo que en el primer renderizado results es undefined o null

Mi recomendación es que inicialices results con un arreglo vacío o bien en la misma línea que hace el map agregar una validación previa

{results && results.map(...)}

ó

{!!results && results.map(...)}

1
  • Gracias a tu cometario lo resolvi de la siguiente manera : {results?.map(())=>()}. Es decir le puse la condicion a result a ver si existe o no! genial y gracias! el 30 nov. 2020 a las 3:35

Tu Respuesta

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

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