如何使用反应挂钩将文件放入状态变量

Question

我正在尝试使用 React Hooks 上传图片

const [picture, setPicture] = useState();

const onChangePicture = e => {
    console.log('picture: ', picture);
    setPicture(...picture, e.target.files[0]);
};

<input
  type="file"
  //style={{ display: 'none' }}
  onChange={e => onChangePicture(e)}
/>

但是我收到以下错误：

 Uncaught TypeError: picture is not iterable

当我将 onChangePicture 更改为

setPicture(picture, e.target.files[0])

图片变量未定义，

任何帮助，将不胜感激。

原文由 akano1 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想你的意思是：

 setPicture([...picture, e.target.files[0]]);

这会将第一个文件连接到所有当前文件。

请记住使用 const [picture, setPicture] = useState([]); 以确保它不会在第一次出现时损坏

原文由 apokryfos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于来到这里寻找如何使用 TypeScript 的任何人：

 const [file, setFile] = useState<File>();

const onChange = (event: React.FormEvent) => {
    const files = (event.target as HTMLInputElement).files

    if (files && files.length > 0) {
        setFile(files[0])
    }
}

原文由 GG. 发布，翻译遵循 CC BY-SA 4.0 许可协议