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!
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
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[]) => {});
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