-1
votes

TypeError array.map n'est pas une fonction

Je construis une application React qui extrait les données d'un compartiment S3.

{"photos":[{"Key":"Blusa-con-tejido-y-Pantalon-(1).jpg","LastModified":"2020-10-14T23:03:56.000Z","ETag":"\"211fa91695f9cf5c0db52b7d8696a6b5\"","Size":116003,"StorageClass":"STANDARD"},{"Key":"Blusa-con-tejido-y-Pantalon-(2).jpg","LastModified":"2020-10-14T23:03:56.000Z","ETag":"\"a27e32e9bdf275b98dd6b12d747c7ff4\"","Size":142108,"StorageClass":"STANDARD"},{"Key":"Blusa-con-tejido-y-Pantalon-(3).jpg","LastModified":"2020-10-14T23:03:56.000Z","ETag":"\"2dae6a85ffb74130317dee3577ab42c5\"","Size":159906,"StorageClass":"STANDARD"},{"Key":"Blusa-con-tejido-y-Pantalon-(4).jpg","LastModified":"2020-10-14T23:03:56.000Z","ETag":"\"f3f2f5716f2d0da2f4f7d756a1302801\"","Size":128466,"StorageClass":"STANDARD"},{"Key":"Blusa-con-tejido-y-Pantalon-(5).jpg","LastModified":"2020-10-14T23:03:56.000Z","ETag":"\"c4135e0516e6fc5f17fbcea05bbb0aa5\"","Size":125733,"StorageClass":"STANDARD"},{"Key":"Blusa-con-tejido-y-Pantalon-(6).jpg","LastModified":"2020-10-14T23:03:56.000Z","ETag":"\"2952dcf05490e21617176280bebdd5a2\"","Size":122684,"StorageClass":"STANDARD"},{"Key":"Blusa-con-tejido-y-Pantalon-(7).jpg","LastModified":"2020-10-14T23:03:56.000Z","ETag":"\"1506f3196095edd66a0d4c85936a302f\"","Size":106216,"StorageClass":"STANDARD"}]}

J'obtiens TypeError: photos.map n'est pas une fonction;

C'est ce que je reçois de S3.

const Products = () => {
const [photos, setPhotos] = useState([]);
useEffect(() => {
    getBucket().then( data => setPhotos({photos: data}))
  }, [])
return (
    <Fragment>
        {photos.length === 0 ? (
                <h2>Loading...</h2>
            ) : (
                photos.map((photo)=>(
                    <ProductCard img={photo.Key} />
                ))
            )
        }
    </Fragment>
)}

Toute aide est appréciée.

reactjs typeerror

0 commentaires

4 Réponses :

0
votes

Vous définissez l'état de vos photos sur des data mais les data ne sont pas un tableau - c'est un objet avec une propriété appelée photos , et CELA est le tableau. Modifiez votre useEffect pour l'utiliser.

useEffect(() => {
    getBucket().then( data => setPhotos({photos: data.photos}))
  }, [])

1 commentaires

Ouais, tu as raison, sauf pour le morceau data.photos. «Data» est un tableau dans mon cas d'utilisation, mais je ne le transmettais pas correctement à setPhotos. Merci pour vos conseils.

0
votes

setPhotos est faux. vous êtes actuellement passé json {photos: data} . vous devez passer le tableau en tant que setPhotos de l'ensemble setPhotos

useEffect(() => {
    getBucket().then( data => setPhotos(data.photos))
  }, [])

1 commentaires

J'ai peut-être rendu mon problème peu clair en indiquant ce que je récupère de S3. L'extrait de code ci-dessus qui dit "photos", est l'état de mon composant. Les données que je récupère de S3 sont un tableau d'objets. Il n'a pas de propriété «photos».

0
votes

Je l'ai maintenant. Le problème était que j'utilisais setPhotos de manière incorrecte. Mon code précédent était:

useEffect(() => {
getBucket().then(data => setPhotos(data))

}, [])

Le code correct doit être:

useEffect(() => {
getBucket().then(data => setPhotos({photos: data}))

}, [])

0 commentaires

0
votes

Cela peut se produire si le type de données msgs n'est pas un tableau. si vous faites cela avec un objet "data" d'une réponse API. map n'est disponible que pour les tableaux car il vit sur le prototype du tableau array.prototype.map. Vous ne pouvez pas utiliser de carte sur un objet.

comme ceci: const [photos, setPhotos] = useState ([{}])

0 commentaires