如何在 React(Next.js) 中的 useState 中获取多个文件？

Question

首先，请查看我的代码。

可能有拼写错误！ （我重写了我的代码）

const test = () => {

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

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


return (


   {
   files.map((file, index) => (
       <div key={index}>
           <p>  {file[index].name}  </p>
           <button>  Delete  </button>
       </div>
   ))
   }

   <label onChange={handleFile}>
     <input type='file' mutiple /> Attach File
   </label>
)

}

当我使用此代码进行渲染时，会出错，

TypeError：无法读取未定义的属性（读取“名称”）

{文件[索引].name}

像这样。

当我 delete.name 时，只呈现按钮。 （因为我没有指定要渲染文件属性的内容。）

此外，我正在尝试一次渲染多个文件。 当我将输入类型设置为multiple时，当我选择上传内容时，我可以 select 多个文件。

但是，即使我选择了两个或三个，它也只渲染了一个。

我希望我的解释能很好地描述我的情况。 如果您有任何问题，请问我！

期待收到你的消息！

Answer 1

如果您在同一个处理程序 function 中多次更新相同的 state，则只有最后一次调用才能解决性能问题。 您必须将 onChange 处理程序更改为：

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

也如另一个答案中所述，将“名称”行更改为：

<p>{file.name}</p>

Answer 2

您不需要 map 中的 [index] 部分，所以应该看起来像这样

 <p>{file.name}</p>

现在应该工作:)

多次上传更新

  const handleFile = (e) => {
    const newSelectedArray = files;
      newSelectedArray.push({
        ...e.target.files[0],
        identifier: e.target.filename  //check this please i cant remember what the array name is called for filename. You dont need this yet but once we get the first bit working we can include it in something cool.
      });
    setFiles(newSelectedArray)
}

让我知道这个，因为这对我来说也是一场噩梦，所以希望这会奏效

Answer 3

对于和我有同样问题的人来说，这是一个权宜之计。

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

     const handleFile = (e) => {
        setFiles([...files, e.target.files[0], e.target.files[1], e.target.files[2]])
        if(e.target.files[1] == null) {
            setFiles([...files, e.target.files[0]])
        } if (e.target.files[1] && e.target.files[2] == null) {
            setFiles([...files, e.target.files[0], e.target.files[1]])
        } 
    };

使用条件语句，您可以控制文件的索引。 但是，我仍然不知道解决问题的其他方法是什么。

总之，希望我的回答对你有所帮助！

Answer 4

我不确定我是否遗漏了什么，但我认为这样的循环是多余的，而你可以简单地做

const handleFile = (e) => {
   setFiles(e.target.files)
}

此外，当您想要访问之前的 state 值时，您可能应该通过使用回调 function 在 setFiles 这样的内部访问之前的 state 值

for(let i=0; i<e.target.files.length; i++){
    setFiles((prevfiles)=>[...prevFiles,e.target.files[i]])
}