import React, { useState } from "react";

export default function App() {
  const [photo, setPhoto] = useState([]);
  const pictures = listObjects();  // getting image flies from AWS.S3, and they are array of objects, and the key "Key" contains image files like "dog.gif"
  const getAllPictures = (pics) => {
    pics.then((data) => {
      return data.forEach((picture) => {
        // console.log(picture.Key); I've got a stirng img file
        setPhoto((photo) => [...photo, picture.Key]);
      });
    });
  };
  getAllPictures(pictures);

Hola. Estoy tratando de poner una lista de archivos de imagen, como "dog.gif", en estado de reacción usando ganchos, y utilicé una función de contenedor. Ahora no veo ningún error en mi servidor local, pero después de un par de segundos más tarde, el ventilador de mi computadora portátil gira y nunca se detiene hasta que cierro el navegador, también ocasionalmente puedo ver la pelota de playa girando en mi computadora portátil. Supongo que estoy haciendo mal para poner la lista en el estado, o estoy obteniendo demasiados datos de AWS.S3. ¿Alguien puede señalarme qué estoy haciendo mal aquí, por favor?

1
Yuya 1 may. 2020 a las 02:43

2 respuestas

Es posible que desee establecer el estado una vez, de lo contrario se ejecutará en un bucle de renderizado infinito.
Puede inicializar algunos datos en el montaje de componentes con useEffect hook.

Aquí hay un ejemplo usando useEffect:

import React, { useState } from "react";

export default function App() {
  const [photo, setPhoto] = useState([]);

  const getAllPictures = (pics) => {
    pics.then((data) => {
      return data.forEach((picture) => {
        // console.log(picture.Key); I've got a stirng img file
        setPhoto((photo) => [...photo, picture.Key]);
      });
    });
  };

  useEffect(() => {
    const pictures = listObjects();
    getAllPictures(pictures);
  }, [])

Lo que está mal con la implementación actual:

export default function App() {
  // photo has an initial value
  const [photo, setPhoto] = useState([]);
  const pictures = listObjects();


  const getAllPictures = (pics) => {
    pics.then((data) => {
      return data.forEach((picture) => {
        // The setState will trigger a re-render
        setPhoto((photo) => [...photo, picture.Key]);
      });
    });
  };

  // On each setState (re-render) this function will be executed
  getAllPictures(pictures);
1
Simon Bruneaud 1 may. 2020 a las 00:05

@Yuya, la pregunta tiene que ver con buscar y configurar datos utilizando un componente funcional de reacción. el useEffect es un buen candidato para una solicitud de API que causa un efecto secundario (re-render) configurando el estado. lo que Simon escribió es correcto, excepto que el gancho también debe importarse desde arriba, así

import React, { useState, useEffect } from "react";

Además, la llamada a la API getAllPictures parece un poco apagada.

pics.then((data) => {
   return data.forEach((picture) => {
   // The setState will trigger a re-render
     setPhoto((photo) => [...photo, picture.Key]);
   });
});

pics es un objeto , NO una promesa . hacer pic.then produciría un error de tipo. para obtener más detalles sobre el uso de .then, eche un vistazo a este respuesta de stackoverflow. Supongo que la llamada debería verse así:

getAllPictures('http://url/to/the/endpoint').then((data) => {...})
0
user3366943 1 may. 2020 a las 02:35