首頁(yè) 猿問(wèn) 在 for 循環(huán)的每次迭代中更新?tīng)顟B(tài)

在 for 循環(huán)的每次迭代中更新?tīng)顟B(tài)

JavaScript

暮色呼如 2021-12-12 09:45:45

伙計(jì)們！for-loop在狀態(tài)保持為 1 個(gè)元素時(shí)，我在遍歷數(shù)組變量的每次迭代時(shí)遇到問(wèn)題。這是我的輸入<input accept="image/*" type="file" onChange={handlePhotoChange} multiple/> ，這是handlePhotoChange方法const [images, setImages] = useState([])const handlePhotoChange = async (event) => { const { files } = event.target; for (let i = 0; i < files.length; i += 1) { const file = files[i]; if (!file.type.match('image')) { continue; } setImages([...images, { loading: true, src: null }]); await firebase.doUploadImage(file, auth.uid); const url = await firebase.getImageUrl(file.name, auth.uid); setImages([...images.slice(0, -1), { loading: false, src: url }]); }}我在這里做的是在將圖像上傳到 firebase 存儲(chǔ)之前將加載變量設(shè)置為 true，并通過(guò)這個(gè)loading我顯示一個(gè)加載器。然后我的上傳準(zhǔn)備好了，我得到了圖像的 firebase url 并覆蓋了數(shù)組圖像 [] 中的最后一個(gè)元素。然后我們繼續(xù)下一張圖片。這樣我將在每個(gè)圖像上顯示一個(gè)加載器。但問(wèn)題是images循環(huán)后的數(shù)組只有最后添加的元素。我想這是setImages異步但等待您的意見(jiàn)的功能。謝謝：）

查看完整描述

2 回答

慕容森

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超18個(gè)贊

如果我正確理解您的問(wèn)題，那么像這樣的解決方案可以工作：

const [images, setImages] = useState([]);

const handlePhotoChange = async (event) => {

const { files } = event.target;

setImages([...images, { loading: true, src: null }]);

let newImagesArray = [];

for (let i = 0; i < files.length; i += 1) {

const file = files[i];

if (!file.type.match('image')) {

continue;

}

await firebase.doUploadImage(file, auth.uid);

const url = await firebase.getImageUrl(file.name, auth.uid);

let obj = {loading: false, src: url};

newImagesArray.push(obj);

}

//get state

let newImages = images;

//add new images

newImages.push(newImagesArray)

//update state

setImages(newImages);

}

我們正在做的是創(chuàng)建一個(gè)臨時(shí)數(shù)組newImages來(lái)保存所有新文件。然后一旦我們遍歷所有上傳的文件，我們將數(shù)組放入狀態(tài)。

讓我知道它是否有效/是否有問(wèn)題。

反對(duì) 回復(fù) 2021-12-12

德瑪西亞99

TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊

它是異步的，只需更改一次狀態(tài)。另外如果你想訪問(wèn)以前的狀態(tài)，你應(yīng)該使用 useState 的回調(diào)版本

const [stateObject, setObjectState] = useState({

firstKey: '',

secondKey: '',

});

setObjectState((prevState) => ({

...prevState,

secondKey: 'value',

}));

您可以拆分加載狀態(tài)和上傳狀態(tài)以使其更易于管理，偽代碼如下

const handlePhotoChange = (event) => {

const { files } = event.target;

const loadingImages = [];

for (let i = 0; i < files.length; i += 1) {

const file = files[i];

if (!file.type.match('image')) {

continue;

}

loadingImages.push({ file });

firebase.doUploadImage(file, auth.uid)

.then(// add to uploaded images state)

}

// set loading images state after iteration is complete

}

反對(duì) 回復(fù) 2021-12-12

2 回答
0 關(guān)注
216 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

在 for 循環(huán)的每次迭代中更新?tīng)顟B(tài)

在 for 循環(huán)的每次迭代中更新?tīng)顟B(tài)

2 回答

添加回答