React 传递了数组，行为很奇怪

问：

我在我的 React 项目中遇到了一个奇怪的问题，我似乎无法弄清楚。

function App() {
  const [files, setFiles] = useState([]);
  const [selected, setSelected] = useState(null);


  const handleFileAdd = function(newFiles){
    console.log(newFiles);
    console.log([...files, ...newFiles])
    setFiles([...files, ...newFiles]);
  };

  return (
    <div className="App">
        <div className="main-child"><FileHandler addFiles = {(x) => {handleFileAdd(x)}} setFiles={setFiles} files={files} setSelected={setSelected} selected={selected}/></div>
    </div>
  );
}

通过另一个组件，addFiles 函数得到，然后进一步传递给 FileDrop 组件。

    function FileDrop(props){

    const onDropFunction = function(files){
        var temp = [];

        files.forEach( (file) => {
            var reader= new FileReader();

            reader.onload = () => {
                const binaryStr = new TextDecoder().decode(reader.result);
                temp.push({"name": file.name, "format": file.type, "data": binaryStr});
                };

            reader.readAsArrayBuffer(file);
        });
        props.addFile(temp);
        
    };

    return(
        <Dropzone onDrop={onDropFunction} multiple={true}>
            {({getRootProps, getInputProps , isDragActive}) => (
                <section>
                <div id='drop-off-area' {...getRootProps()}>
                    <input {...getInputProps()} />
                    {isDragActive ? 
                    <p>Drop your file here :)</p> :
                    <p>Drag 'n' drop some files here, or click to select files</p>}
                    <div id='drop-off-area-files'>
                    </div>
                </div>
                </section>
            )}
        </Dropzone>
    );
}

当我打印出“newFiles”（一个对象数组）时，它会打印出我传递的普通数组。 当我打印出下面的联接数组时，它突然是空的。 我只是想不通，为什么会这样.. 提前致谢

我已经尝试了连接和复制数组的不同方法，但没有任何帮助。 我更新 files-array 的其他函数正在按预期工作。