import React, { useState } from 'react'; import { Upload } from 'antd'; import ImgCrop from 'antd-img-crop'; interface uploadProps{ fileList:string; } const UploadD:React.FC <uploadProps> = () => { const [fileList, setFileList] = useState([ { uid: '-1', name: 'image.png', status: 'done', url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }, ]); const onChange = ({ fileList: newFileList }) => { setFileList(newFileList); }; const onPreview = async file => { let src = file.url; if (!src) { src = await new Promise(resolve => { const reader = new FileReader(); reader.readAsDataURL(file.originFileObj); reader.onload = () => resolve(reader.result); }); } const image = new Image(); image.src = src; const imgWindow = window.open(src); imgWindow!.document.write(image.outerHTML); }; return ( <ImgCrop rotate> <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList}//this error:Type 'string' cannot be assigned to type 'UploadFileStatus | undefined'. onChange={onChange} onPreview={onPreview} > {fileList.length < 5 && '+ Upload'} </Upload> </ImgCrop> ); }; export default UploadDERROR
Type '{ uid: string; name: string; status: string; url: string; }[]' cannot be assigned to type 'UploadFile<any>[]'. Type '{ uid: string; name: string; status: string; url: string; }' cannot be assigned to type 'UploadFile<any>'. The types of property 'status' are incompatible. Type 'string' cannot be assigned to type 'UploadFileStatus | undefined'. ts(2322) interface.d.ts(70, 5): Required type from property "fileList", on type "IntrinsicAttributes & UploadProps<any> & { children?: ReactNode; } & RefAttributes<any>" hereCreo que porque está asignando string a UploadFileStatus | undefined UploadFileStatus puede ser uno de error | success | done | uploading | removed
Intenta usar la afirmación de tipo :
const [fileList, setFileList] = useState([ { uid: '-1', name: 'image.png', status: 'done' as UploadFileStatus, url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }, ]);