React：如何解决错误：Object is of type 'unknown'？

Question

I'm trying to use the axios in order to fetch data from an API, but the response.data gives me 'unknown' error. Not sure how to fix this. Anyone can help me please. I'm using Typescript.

This is the error I'm getting:

Object is of type 'unknown'.ts(2571) (parameter) response: AxiosResponse<unknown, any>

    interface Props {
  pokemonItem: PokemonItem[];
  children: React.ReactNode | React.ReactNode[];
}

export const PokemonContainer: React.FC = (props) => {
  const { pokemonItem } = props;
  const { name, height, weight, abilities } = pokemonItem;

  const [hovered, setHovered] = React.useState(false);
  const [imageLoaded, setImageLoaded] = React.useState(false);
  const [pokemon, setPokemon] = React.useState([]);


  const getPokemons = () => {
    try {
      axios
      .get('https:pokeapi.co/api/v2/pokemon')
      .then((response) => {
        setPokemon(response.data.results.map((item) => item.name));
      });
    } catch (error) {
      console.log(error);
    }
  };

  React.useEffect(() => {
    getPokemons();
  }, []);

in another file I have defined the data types:

export interface PokemonItem {
id: number;
name: string;
height: string;
weight: string;
abilities: string;
image: string;
}

Answer 1

response type is unknown to TS. unknown is just a like any in the way that it can be anything, but is a safer option to it. TS will not let you access response properties since it has no idea what the object might be.

You will want to try this and use it as any .

const getPokemons = () => {
    try {
      axios
      .get('https:pokeapi.co/api/v2/pokemon')
      .then((response : any) => { 
       setPokemon(response.data.results.map((item) => item.name));
      });
    } catch (error) {
      console.log(error);
    }
  };

Answer 2

I have the same problem using Fetch, and the way I solved it is: create a new type for the "error" of "unknown" type.

type ResponseData = {
  id: string;
  token: string;
  error: string;
};

interface ErrorRes {
  json: () => Promise<ResponseData>;
}

export const handleSignIn = async (
  email: string,
  password: string,
): Promise<ResponseData> => {
  try {
    const response = await fetch('https://reqres.in/api/login', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email, password }),
    });
    return (await response.json()) as ResponseData;
  } catch (error) {
    return await (error as ErrorRes).json();
  }
};

Answer 3

If you still need an Axios solution without turning off TypeScript, here it is:

export interface ErrorResponseData {
  message: string
}

try {
      const { data } = await axios.post('login', payload)
      return data
    } catch (e) {
      return (e as AxiosError<Array<ErrorResponseData>>).response?.data[0].message || ERROR_SOMETHING_WENT_WRONG
    }

The AxiosError type is a Generic that takes in the expected error response interface.

Of course, the interface should match your expected error format. In my case, I always receive an array of errors, but I am only interested in the first error. I then added a fallback error in case the error received doesn't match the shape, eg.network error.