文件正在替换文件，而不是在 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

在我看来，您只需要在更改事件期间传播 prev state 值和文件。

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

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

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

如果可能，您可以删除 codepen 链接