Javascript 使用'；useState'；

嗨。我试图使用钩子将图像文件列表（如“dog.gif”）置于react状态，并使用了包装器函数。现在我在本地服务器上看不到任何错误，但几秒钟后，我的笔记本电脑风扇旋转，直到我关闭浏览器才停止，偶尔我也能看到笔记本电脑上旋转的沙滩球。我猜我将列表放入状态是错误的，或者我从AWS.S3获取了太多数据。有人能指出我在这里做错了什么吗？

您可能需要设置一次状态，否则它将进入无限重渲染循环。
您可以使用钩子初始化组件挂载上的一些数据

以下是使用useEffect的示例：

import React，{useState，useffect}来自“React”；
导出默认函数App（）{
const[photo，setPhoto]=useState（[]）；
常量getAllPictures=（图片）=>{
图片。然后（（数据）=>{
返回数据。forEach（（图片）=>{
//log（picture.Key）；我有一个stirng img文件
setPhoto（（photo）=>[…photo，picture.Key]）；
});
});
};
useffect（（）=>{
const pictures=listObjects（）；
获取所有图片（图片）；
}, [])

当前的实施有什么问题：

导出默认函数App（）{
//照片有一个初始值
const[photo，setPhoto]=useState（[]）；
const pictures=listObjects（）；
常量getAllPictures=（图片）=>{
图片。然后（（数据）=>{
返回数据。forEach（（图片）=>{
//设置状态将触发重新渲染
setPhoto（（photo）=>[…photo，picture.Key]）；
});
});
};
//在每个设置状态（重新渲染）上，将执行此函数
获取所有图片（图片）；

@Yuya，这个问题与使用react功能组件获取和设置数据有关。钩子是api请求的一个很好的候选者，该请求通过设置状态导致副作用（重新渲染）。Simon写的是正确的，除了钩子也需要从顶部导入，如下所示

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

此外，

getAllPictures

api调用看起来有点不对劲

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

pics

是一个对象，而不是一个承诺。执行

pic会产生一个类型错误。有关
的更多详细信息，请查看此用法。我猜调用应该如下所示：

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

列表中有多少个对象？同样在大型阵列上，使用forEach比使用for循环慢（对于每个迭代，每个实例都要在每个迭代中创建一个新函数）。当您在开发人员工具中检查“网络”选项卡时，您是否看到调用解析良好？现在我可以在控制台上看到157个图像文件（字符串）。
getAllPictures('http://url/to/the/endpoint').then((data) => {...})