javascript - 使用 'useState' 将图像文件添加到 react 状态

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

嗨。我试图使用钩子(Hook)将图像文件列表(例如“dog.gif”)放入 react 状态，并且我使用了包装函数。现在我在本地服务器上没有看到任何错误，但几秒钟后，我的笔记本电脑风扇旋转并且永远不会停止，直到我关闭浏览器，有时我还可以看到笔记本电脑上旋转的沙滩球。我猜我要么把列表放入状态中做错了，要么我从 AWS.S3 获取了太多数据。谁能指出我在这里做错了什么？

Answer 1

您可能需要设置一次状态，否则它将陷入无限的重新渲染循环。
您可以使用 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);