如何在useState中设置正确的类型,以便将图像推送为数组中的File?
这是我的使用状态:
const [colorsAndImages, setColorsAndImages] = useState([{ images: [], colors: '' }])
这是我试图推送图像的地方,但我遇到了一个错误:
const handleSetImage = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
const file = event.target.files;
const list = [...colorsAndImages]
list[index].images.push(file?.item(0)!)
setColorsAndImages(list)
};
错误出现在。。。(文件?.item(0(!(
类型为"File"的参数不可分配给类型为的参数"从不"。
在没有显式泛型的情况下使用useState
钩子时,TypeScript将尝试从最初传递的值推断类型。
由于您的初始值包括一个空数组(对于images
(,TypeScript无法确定该数组中的值的类型,因此将其指定为类型never
。
要解决此问题,请在初始化状态时明确指定状态类型:
const [colorsAndImages, setColorsAndImages] = useState<{images: File[], colors: string}[]>([{ images: [], colors: '' }])