Проблема с типами при использовании useState, typescript/react?

Question

[cester]

Добрый день! Помогите пожалуйста разобраться и исправить ошибку с typescript.
Проблема с типами при использовании стейта.
С typescript это первый проект поэтому решение возможно очень простое)

Есть даний код

type State = {
  files: [] | { name: string; type: string }[];
};
...
  const [files, setFiles] = useState<State[]>([]);

...
  const handleDrop = (acceptedFiles: { name: string; type: string }[]) => {
    const filesToSave = isMultiple
      ? [...files, ...acceptedFiles]
      : [acceptedFiles[0]];

   setFiles(filesToSave); // здесь ошибка \\\\\\
  };

Текст ошибки

Argument of type '(State | { name: string; type: string; })[]' is not assignable to parameter of type 'SetStateAction<State[]>'.   
Type '(State | { name: string; type: string; })[]' is not assignable to type 'State[]'.     
Type 'State | { name: string; type: string; }' is not assignable to type 'State'.       
Property 'uploadedFiles' is missing in type '{ name: string; type: string; }' but required in type 'State'.

Буду благодарен за помощь!

Answer 1

[Дмитрий]

type AcceptedFile = {
  name: string;
  type: string;
};
...
  const [files, setFiles] = useState<AcceptedFile[]>([]);
...
  const handleDrop = (acceptedFiles: AcceptedFile[]) => {
   setFiles((currentFiles) => {
     return isMultiple
      ? [...currentFiles, ...acceptedFiles]
      : [acceptedFiles[0]];
   });
  };

Comments

[cester]

Да, спасибо)