文件正在替换文件，而不是在 React 中添加 (Next.js)

Question

请先查看我的代码。

const test = () => {

const [files, setFiles] = useState ([]);

//I think I have to edit following statement.

const handleFile = (e) => {
   const newFiles = []
   for (let i=0; i < e.target.files.length; i++) {
       newFiles.push(e.target.files[i])
    }
        setFiles(newFiles)
};

return (

   {files.map((file, index) => (
     <div>
       <div key={index}>
         <p>
         {file.name}
         </p>
         <Button size='small' onClick={() => {deleteSelectedFile(file.name)}}>
         Delete
         </Button>
       </div>
     </div>
    ))}

    <div>
        <label onChange={handleFile}>
            <input type='file' multiple />+ Attach File
        </label>
    </div>

)

}

通过 handleFile 语句，我可以适当地获取文件。

但是，当我一次上传一个文件然后再次上传一个文件时，

文件未添加。文件替换文件。

一次上传多次没有问题

例如，我上传'hello.jpg'，它在屏幕上呈现得很好。然后，我上传 'goodbye.jpg'，它呈现得很好，但是 'goodbye.jpg' 替换了 'hello.jpg'。

因此，我看到的只是'goodbye.jpg'[按钮]，而不是

'hello.jpg' [按钮] 'goodbye.jpg' [按钮]

.

我希望我的文件堆叠起来，而不是替换。

我需要一些智慧！

Answer 1

在我看来，你只需要在更改事件期间传播以前的状态值和文件。

import { useState } from "react";

export default function App() {
  const [files, setFiles] = useState([]);

  const handleChange = (e) => {
    // This is what you need
    setFiles((prev) => [...prev, ...Object.values(e.target.files)]);
  };

  return (
    <div>
      <label onChange={handleChange}>
        <input type="file" multiple />
      </label>
      {files.map((file) => {
        return <p>{file.name}</p>;
      })}
    </div>
  );
}

Answer 2

你不为新文件创建新变量怎么样，你只是设置文件的状态，因为它是一个数组

setFiles(oldFile => [...oldFile,e.target.files[i]]);

如果可能的话，你可以放下一个代码笔link

文件正在替换文件，而不是在 React 中添加 (Next.js)

File is replacing file, not adding in React (Next.js)

javascript

file

reactjs

next.js