如何在另一个对象 ReactJS 中附加文件？

Question

我有一个文件数组，用于稍后将它们附加到表单数据中，但首先我需要压缩它们并附加到已压缩文件的新数组中。 我无法在循环中将文件附加到新数组。

我做了什么尝试：

const [compressedImages, setCompressedImages] = useState([]);

循环中：

setCompressedImages(...compressed) //it doesn't seem to work

再试一次： （循环中）

compressedImages = [...compressed] //doesn't work

或

compressedImages.push(compressed) //doesn't work

为什么传播运算符在这种情况下不起作用？

我有什么

<input
       type="file"
       multiple
       onChange={e => selectImages(e)}
  />

函数选择图像：

const [images , setImages] = useState([]);
const selectImages = e => {
        setImages(e.target.files);
    }

然后我需要压缩我的文件并将它们全部附加到另一个数组中。

for (let i = 0; i<images.length; i++){
            let compressed = await imageCompression(images[i], options)
            images = [...compressed]
            //at the end of the loop I must have exactly the same array as 'images' 
            //but with already processed files
        }

Answer 1

要将元素添加到数组状态，您应该根据当前状态创建一个新数组并将新元素添加到其中，然后将新数组设置为状态：

const [myState, setMyState] = useState([]);
// Add an element to state(long way)
myState.push('element');
setMyState(myState);
// Add an element to state(short way)
setMyState([...myState, 'element']);