Prevstate with TypeScript-CodePudding

I am new in typescript, trying to receive users files and update state. can't figure out typescript error -

Argument of type '(prev: never[]) => any[]' is not assignable to parameter of type 'SetStateAction<never[]>'. Type '(prev: never[]) => any[]' is not assignable to type '(prevState: never[]) => never[]'. Type 'any[]' is not assignable to type 'never[]'. Type 'any' is not assignable to type 'never'.ts(2345)).


    import React, { useState, ChangeEvent } from "react";

export default function Home() {
  const [userImg, setUserImg] = useState([]);

  const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    const chosenFiles = Array.prototype.slice.call(e.target.files);
    setUserImg((prev) => (prev ? [...prev, chosenFiles] : [chosenFiles]));
  };
  return (
    <div>
      <h3>Welcome to home page of stunning image app</h3>
      <p>Add an amazing photo from your device to your gallery</p>
      <input type="file" accept="image/*" multiple onChange={changeHandler} />
    </div>
  );
}

CodePudding user response：

Looks like you need to give useState a generic type parameter so that the [] given isn't inferred as never[] (empty arrays are inferred as never[]):

const [userImg, setUserImg] = useState<File[]>([]);

I got the File[] type from FileList - since you're spreading a file list, it should be an array of files.