[英]Add image files into react state using 'useState'
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);
Hi.你好。 I'm trying to put a list of image files, like "dog.gif", into react state using hooks, and I used a wrapper function.
我正在尝试使用钩子将图像文件列表(例如“dog.gif”)放入反应 state 中,并且我使用了包装器 function。 Now I don't see any error on my local server, but after a couple of seconds later, my laptop fan spins and never stops until I close the browser, also occasionally I can see the spinning beach ball on my laptop.
现在我在本地服务器上看不到任何错误,但几秒钟后,我的笔记本电脑风扇旋转,并且在我关闭浏览器之前从未停止过,偶尔我也可以在笔记本电脑上看到旋转的沙滩球。 I'm guessing I'm either doing wrong to put the list into the state, or I'm getting too much data from AWS.S3.
我猜我要么做错了将列表放入 state,要么我从 AWS.S3 获取了太多数据。 Can anyone point me out what am I doing wrong here, please?
谁能指出我在这里做错了什么?
You may want to set the state once, otherwise it will run into an infinite re-render loop.您可能需要设置一次 state,否则它将陷入无限的重新渲染循环。
You could initialize some data on component mount with useEffect hook.您可以使用useEffect挂钩初始化组件安装上的一些数据。
Here is an example using useEffect:下面是一个使用 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);
}, [])
What is wrong with the current implementation:当前实现有什么问题:
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);
@Yuya, the question has to do with fetching and setting data using a react functional component. @Yuya,这个问题与使用反应功能组件获取和设置数据有关。 the
useEffect
hook is a good candidate for an api request that causes a side effect (re-render) by setting the state. useEffect
钩子非常适合通过设置 state 导致副作用(重新渲染)的 api 请求。 what Simon wrote is correct, except the hook also needs to be imported as well from the top, like this西蒙写的是正确的,除了钩子也需要从顶部导入,像这样
import React, { useState, useEffect } from "react";
in addition, the getAllPictures
api call looks a bit off.此外,
getAllPictures
api 调用看起来有点不对劲。
pics.then((data) => {
return data.forEach((picture) => {
// The setState will trigger a re-render
setPhoto((photo) => [...photo, picture.Key]);
});
});
pics
is an object , NOT a promise . pics
是object ,而不是promise 。 doing pic.then
would yield a type error.执行
pic.then
会产生类型错误。 for more details about .then
usage, take a look at this stackoverflow answer .有关
.then
用法的更多详细信息,请查看此stackoverflow 答案。 I'm guessing the call should look something like this:我猜这个电话应该是这样的:
getAllPictures('http://url/to/the/endpoint').then((data) => {...})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.