我的uploadStatus状态有问题。我没有得到react-hooks状态的更新值。如果我在fileOnProgress()内添加console.log(),我将获得uploadStatus状态的[]值。
我尝试将uploadStatus状态置于useEffect中,但发生无限循环,因为该状态也在函数内部进行了更新。
注意:在这种情况下,uploadStatus已经由其他函数填充,这就是为什么我希望获得更新后的值。
import React, { useEffect, useState } from 'react';
function Dropzone {
const [ uploadStatus, setUploadStatus ] = useState([]);
const [ resumableFiles, setResumableFiles ] = useState([]);
const resumableListener = () => {
if (resumableFiles.length === 0) return;
resumableFiles.map(resumable => {
resumable.on('progress', () => {
fileOnProgress(resumable);
});
resumable.on('fileError', (error) => {
console.log(error)
});
});
};
const fileOnProgress = (resumable) => {
const file = resumable.files[0];
const size = (file.size / 1048576).toFixed(2);
const progress = (resumable.progress() * 100).toFixed(2).toString() + '%';
const cont = [...uploadStatus];
cont.map(d => {
if (d.id === file.uniqueIdentifier) {
d.status = progress;
}
});
setUploadStatus(cont);
};
useEffect(() => {
resumableListener();
}, [resumableFiles]);
...
}
答案 0 :(得分:3)
Array.map
返回一个新数组,因此请尝试:
const newCont = cont.map(d => {
if (d.id === file.uniqueIdentifier) {
d.status = progress;
}
return d;
});
setUploadStatus(newCont);
如@go_diego所指出的,您还缺少地图中的返回值。