Question

0

154

Views

TypeError: no se pueden leer las propiedades de undefined (leyendo 'cliente')

import React, { useState, useEffect } from 'react'; import axios from 'axios'; {const CustomerList = () => { const [information, setInformation] = useState([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { if (isLoading) { axios.get('').then((response) => { setInformation((prevInfo) => { return [...prevInfo, response.data]; }); }); } return () => { setIsLoading(false); }; }, [information, isLoading]); return ( <> <h2>Name: </h2> {information.map((item, index) => ( <div> <div>{item[index].customer.firstName}</div> <div>{item[index].customer.lastName}</div> </div> ))} </> ); }; export default CustomerList;

Estoy obteniendo datos de una API para trabajar usando axios y useeffect
Mapeo a través de la matriz de datos de respuesta y si no hay información en la matriz, la aplicación se rompe
¿Cómo puedo mapear solo la cantidad específica de elementos en una matriz?
Por ejemplo, si tengo 3 elementos en mi matriz de datos, los mostrará en el navegador desde la declaración de devolución PERO... cuando mapee los 3, continuará intentándolo nuevamente y se romperá, por lo tanto, "el cliente no está definido" porque no no hay más clientes 5. Intenté hacer {item.customer.firstName y obtuve un error de nombre indefinido}

¿Alguna forma de evitar esto? ¡Gracias!

ingrese la descripción de la imagen aquí

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-12T07:52:44.621Z

Así no es como funciona el map . Con estos argumentos a la devolución de llamada:

 information.map((item, index) => ...

index es el índice actual cuando se itera sobre la matriz de information , y item es el elemento en ese índice . No es otra copia de toda la matriz. Así que en lugar de esto:

 item[index].customer.firstName

Simplemente harías esto:

 item.customer.firstName

Aparte, al iterar sobre una matriz para generar una lista en React, querrá agregar una key al elemento de nivel superior. Puede usar index para este propósito si lo desea:

 {information.map((item, index) => ( <div key={index}> ... </div> ))}

O si item tiene un identificador único, puede usarlo en su lugar y eliminar index por completo.

Answer 2 · 2022-07-12T07:52:44.630Z

item[index] no es correcto, ya item se refiere al elemento de la matriz en ese index todos modos.

Forma correcta:

 const data = [1,2,3,4,5,6,7,8,9,10] const mappedData = data.map((d, index) => { console.log("index is", index) console.log("d is", d) console.log("-----------------------------") return d })

Lo que estás tratando de hacer:

 const data = [1,2,3,4,5,6,7,8,9,10] const mappedData = data.map((d, index) => { console.log("index is", index) console.log("d[index] is", d[index]) //undefined since d is not an array console.log("------------------------------") return d })

Answer 3 · 2022-07-12T07:52:44.637Z

Cuando map() una matriz de elementos, está manejando cada item por separado, por lo tanto, no necesita el index , puede usar el index como key , lea más sobre listas y claves aquí .

 {information.map((item, i) => ( <div key={i}> <div>{item.customer.firstName}</div> <div>{item.customer.lastName}</div> </div> ))}

0

154

TypeError: no se pueden leer las propiedades de undefined (leyendo 'cliente')

3 answers

0

0

Forma correcta:

Lo que estás tratando de hacer:

0

Find remote jobs

Andres GPT