“文件”类型的参数不能分配给“从不”类型的参数。 与 TypeScript 反应

Question

如何在 useState 中设置正确的类型，以便可以将图像作为文件推送到数组中？

这是我的使用状态：

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)
    };

错误是...（文件？。项目（0）！）

“文件”类型的参数不能分配给“从不”类型的参数。

Answer 1

当使用没有显式泛型的useState钩子时，TypeScript 将尝试从初始传递的值推断类型。

由于您的初始值包含一个空数组（对于images ），因此 TypeScript 无法确定该数组中的值的类型，因此将其分配为never类型。

要解决此问题，请在初始化时明确指定 state 的类型：

const [colorsAndImages, setColorsAndImages] = useState<{images: File[], colors: string}[]>([{ images: [], colors: '' }])