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])

图片变量未定义

任何帮助将不胜感激。

Answer 1

您可以将值直接传递给setPicture函数以设置状态变量图片。

尝试：

const [picture, setPicture] = useState(null);

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

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

Answer 2

我认为您打算这样做：

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

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

请记住使用const [picture, setPicture] = useState([]);，以确保它不会第一次中断

Answer 3

我终于解决了这个问题：

问题在这里

const [picture, setPicture] = useState(null); //Incorrect

您可以使用此

const [picture, setPicture] = React.useState(""); //Correct

这可以解决此问题

Answer 4

onChange = {(e) => this.onChangePicture(e)} 只能在您将状态设为状态 = { 图像，名称..... }

但是当使用 useState()

你需要使用

const [image, setImage] = useState("");

onChange = {(e) => setImage(e.target.files[0])}

我希望这能解决错误。一切顺利！

Answer 5

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

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

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

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

如何使用react挂钩将文件置于状态变量中

5 个答案: