typescript React：如何解决错误：对象的类型为“未知”？

avkwfej4 于 2023-01-31 发布在 TypeScript

关注(0)|答案(3)|浏览(1360)

我尝试使用axios从API获取数据，但是www.example.com给我一个"未知"错误。不知道如何修复这个错误。任何人都可以帮助我。我使用的是Typescript。response.data gives me 'unknown' error. Not sure how to fix this. Anyone can help me please. I'm using Typescript.
这是我得到的错误：
对象的类型为"unknown"。ts（2571）（参数）响应：Axios缓解〈未知，任何〉

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();
  }, []);

在另一个文件中，我定义了数据类型：

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

typescript

来源：https://stackoverflow.com/questions/69605339/react-how-to-solve-the-error-object-is-of-type-unknown

3条答案

按热度按时间

pxy2qtax1#

response类型是TS的unknown。unknown与any的相似之处在于它可以是任何对象，但更安全。TS不允许您访问response属性，因为它不知道对象可能是什么。
您会想尝试一下并将其用作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);
    }
  };

赞(0）回复(0）举报 2023-01-31

jljoyd4f2#

我在使用Fetch时遇到了同样的问题，我解决它的方法是：为“未知”类型的“错误”创建一个新类型。

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();
  }
};

赞(0）回复(0）举报 2023-01-31

nuypyhwy3#

如果您仍然需要Axios解决方案而不需要关闭TypeScript，请选择：

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
    }

AxiosError类型是一个泛型类型，它接受预期的错误响应接口。
当然，接口应该符合你期望的错误格式。在我的例子中，我总是收到一个错误数组，但我只对第一个错误感兴趣。然后我添加了一个后备错误，以防收到的错误与形状不匹配，例如网络错误。

赞(0）回复(0）举报 2023-01-31

我来回答

typescript React：如何解决错误：对象的类型为“未知”？

3条答案

相关问题

热门标签

最新问答