Добавить файлы изображений в состояние реакции, используя «useState»

Question

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);

Привет. Я пытаюсь перевести список файлов изображений, таких как "dog.gif", в состояние реакции с помощью хуков, и я использовал функцию-обертку. Теперь я не вижу ошибок на своем локальном сервере, но через пару секунд вентилятор моего ноутбука вращается и никогда не останавливается, пока я не закрою браузер, также иногда я вижу вращающийся пляжный мяч на своем ноутбуке. Я предполагаю, что либо делаю неправильно, чтобы перевести список в состояние, либо получаю слишком много данных из AWS .S3. Кто-нибудь может указать мне, что я делаю здесь неправильно, пожалуйста?

Answer 1

Возможно, вы захотите установить состояние один раз, в противном случае оно будет бесконечно перерисовываться. L oop.
Вы можете инициализировать некоторые данные при монтировании компонента с помощью useEffect hook.

Вот пример использования useEffect:

import React, { useState, useEffect } 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);
  }, [])

Что не так с текущей реализацией:

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);

Answer 2

@ Юя, вопрос касается получения и установки данных с использованием функционального компонента реагирования. хук useEffect является хорошим кандидатом для запроса API, который вызывает побочный эффект (повторный рендеринг) путем установки состояния. то, что написал Саймон, правильно, за исключением того, что хук также нужно импортировать сверху, как это

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

, кроме того, вызов API getAllPictures выглядит немного не так.

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

pics является объектом , НЕ обещанием . выполнение pic.then приведет к ошибке типа. для получения более подробной информации об использовании .then посмотрите этот ответ stackoverflow . Я предполагаю, что вызов должен выглядеть примерно так:

getAllPictures('http://url/to/the/endpoint').then((data) => {...})