在useState反应js钩子后重置文件上传答案

【问题标题】：Reset file upload after useState react js hooks在useState反应js钩子后重置文件上传
【发布时间】：2021-01-08 09:07:29
【问题描述】：

我想在使用 useState 挂钩将所选图像添加到数组后重置我的文件上传控制，但它对我不起作用。

我的代码 -

const fileInputRef = useRef();
const[images,setImages]=useState([]);

const addImage = (e)=>{
 setImages([...images,e.target.files])
}


useEffect(()=>{
if(fileInputRef) fileInputRef.current.value=null
 },[images])

return( <input type="file" ref={fileInputRef} onChange={addImage} />)

现在这里的 fileInputRef 已重置，但这里的问题是我正在获取具有 FileList 对象长度为 0 的图像数组，如下图所示

请帮忙。

【问题讨论】：

试试const[images,setImages]=useState(null);

标签： reactjs ecmascript-6

【解决方案1】：

问题是你没有传递文件的副本，它是一个参考 e.target.files 你只需要传播它以便复制它，这样当 useEffect 运行并删除参考时，你在图像中有一个副本状态

import React, { useEffect, useState, useRef } from "react";

const Stack = () => {
  const fileInputRef = useRef();
  const [images, setImages] = useState([]);

  const addImage = (e) => {
    setImages([...images, ...e.target.files]);
  };

  useEffect(() => {
    if (fileInputRef) fileInputRef.current.value = null;
  }, [images]);

  console.log(images);
  return <input type="file" ref={fileInputRef} onChange={addImage} />;
};

export default Stack;

我在codesandbox上添加了一个演示here

【讨论】：