reactjs - Kan inte komma åt dataproperty på Axios svarobjekt efter framgångsrik GET-förfrågan: Property 'data' finns inte på typen 'void'

Jag bygger ett personligt projekt med React och TypeScript för att lära mig grunderna, och jag sitter fast med ett konstigt (för mig) fel i följande block, där jag använder Axios för att hämta vissa data:

const fetchItem = async () => {
  const response = await axios
    .get("http://localhost:4000/items?id=2")
    .catch(error => console.log(error));
  console.log(response.data);
};

Felmeddelandet är Property 'data' does not exist on type 'void' och dyker upp omedelbart i Visual Studio Code så fort jag försöker komma åt data-egenskapen på mitt response-objekt.

Hur kan jag komma åt response.data korrekt (utan att både min IDE och Webpack klagar)?

Här är hela koden för min komponent, som referens:

import * as React from "react";
import { css } from "emotion";
import axios from "axios";

import { Item } from "./Item/Item";

export interface ContentProps {
  view: string;
}

const fetchItem = async () => {
  const response = await axios
    .get("http://localhost:4000/items?id=2")
    .catch(error => console.log(error));
  console.log(response.data);
};

export class Content extends React.Component<ContentProps> {
  state = {
    text: "test"
  };

  componentDidMount() {
    fetchItem();
  }

  render() {
    return (
      <div>
        {this.props.view === "item" ? (
          <Item text={this.state.text} />
        ) : (
          <List />
        )}
      </div>
    );
  }
}

Felet på webpack:

Den fullständiga feltexten på VSC:s verktygstips säger: Property 'data' does not exist on type 'void | AxiosResponse'..

Svar #1

Ditt await, när det resulterar i ett fel, returnerar undefined, eftersom console.log i ditt catch returnerar undefined, och returvärdet härleds som void.

I princip blandar du här async/await synkron stil med promise asynkron stil för att skriva asynkron kod, det är bättre att hålla sig till en för att undvika förvirring som här med den goda gamla try catch.

Så det kan gå så här:

const fetchItem = async() => {
  try {
    const response = await axios("http://localhost:4000/items?id=2");
    console.log(response.data);
  } catch (error) {
    console.log(error)
  }
};

Relaterade artiklar