React项目中向上传递数组后拼接为空异常求助

你遇到的核心问题是FileReader的onload是异步回调，在你调用props.addFile(temp)的时候，所有文件的读取操作还没完成，temp数组此时是空的。浏览器控制台打印数组时会有“延迟展开”的特性——你看到的newFiles有内容是因为控制台展开时异步操作已经完成，但代码执行时它确实是空数组，导致拼接后的[...files, ...newFiles]和原files一致（如果原files初始为空，就显示为空）。

1. 用Promise封装文件读取逻辑，等待所有异步操作完成 #

修改FileDrop组件的onDropFunction，把每个文件的读取过程包装成Promise，通过Promise.all等待所有文件读取完成后再传递数据：

function FileDrop(props){
  const onDropFunction = async function(files){
    // 用Promise.all等待所有文件读取完成
    const fileDataArray = await Promise.all(files.map(file => {
      return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = () => {
          const binaryStr = new TextDecoder().decode(reader.result);
          resolve({
            "name": file.name,
            "format": file.type,
            "data": binaryStr
          });
        };
        reader.readAsArrayBuffer(file);
      });
    }));
    // 所有文件读取完成后再调用addFiles
    props.addFiles(fileDataArray);
  };

  // 其余代码不变
  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>
  );
}

2. 使用函数式更新确保拿到最新状态 #

在App组件的handleFileAdd中，建议使用函数式更新来修改files状态，避免因状态更新的异步性导致的旧状态引用问题：

const handleFileAdd = function(newFiles){
  console.log(newFiles);
  // 用函数式更新，prevFiles是最新的状态值
  setFiles(prevFiles => {
    const updatedFiles = [...prevFiles, ...newFiles];
    console.log(updatedFiles);
    return updatedFiles;
  });
};

3. 修正props名称不一致问题 #

注意到你在App组件中传递的是addFiles属性，但FileDrop里原本调用的是props.addFile（少了一个s），这会导致方法调用失败，必须确保属性名称完全匹配。

修改后，当文件拖放完成，所有文件的读取操作会全部完成后才会调用addFiles，此时传递的newFiles是完整的文件数据数组，拼接后的数组自然会包含新添加的文件。

内容的提问来源于stack exchange，提问作者tilllius