CODEWITHSUNDEEP
javascriptreactjstypescript
Eric Pezzulo
Eric Pezzulo

Reputation: 399

Type 'string[]' is not assignable to type 'never[]'. Typescript Error

I'm currently using Next.js and TypeScript and I'm confused on the error message I'm getting here. Here's some context to the situation. I'm making an API call and I'm receiving an Object of arrays.

const fetchDogBreeds = async () => {
      const res: any = await axios.get("https://dog.ceo/api/breeds/list/all");
      const data: any = res.data.message;
      setDogBreeds(
        Object.entries(data).map(
          (breed:any) => breed[0].charAt(0).toUpperCase() + breed[0].substring(1)
        )
      );
    };

The code runs fine but I'm getting this TypeScript Error and I don't understand what it means. Error:

Argument of type 'string[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
  Type 'string[]' is not assignable to type 'never[]'.

I'm a little new to TypeScript so I'm a little confused how to get this error to go away. Thanks in advance!

Upvotes: 0

Views: 2247

Answers (3)

Eric Pezzulo
Eric Pezzulo

Reputation: 399

I changed the code to this:

const fetchDogBreeds = async () => {
      const res = await axios.get("https://dog.ceo/api/breeds/list/all");
      const data = res.data.message;
      const listOfDogBreeds: any = Object.entries(data).map(
        (breed: any) => breed[0].charAt(0).toUpperCase() + breed[0].substring(1)
      );
      setDogBreeds(listOfDogBreeds);
    };

and I'm not getting anymore TypeScript errors

Upvotes: 0

vamsiampolu
vamsiampolu

Reputation: 6622

Add the response type to axios.get, this will be passed on as the type of response.data.

export interface DogBreeds {
  message: Record<string, string[]>;
}

const fetchDogBreeds = async () => {
  const res = await axios.get<DogBreeds>("https://dog.ceo/api/breeds/list/all");

  const data = res.data.message;

  // call setDogBreeds and do other stuff. 
}

Also you need to supply the correct parameters to map:

Object.entries(data).map(([key, value]: string[]) => {});

Upvotes: 0

Manu Jo Varghese
Manu Jo Varghese

Reputation: 400

All you have to do is to define the type of res array like this

const res: string[] = await axios.get("https://dog.ceo/api/breeds/list/all");

Without assigning the type of array it will be default set as never

Upvotes: 2

Related Questions