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