使用React-Query和Axios將JSON資料解析為TypeScript物件的簡單方法
P粉621033928
P粉621033928 2024-01-16 12:45:51
0
1
510

這是我從伺服器接收到的JSON資料:

{"id" : 1, "text_data": "example data"}

現在我正在嘗試將這個JSON資料解析成TS物件:

export interface IncomingData {
  id: number;
  text_data: string;
}

function App() {

  // 它可以重写为 'await axios.get<IncomingData>('http://localhost:3000/api')' 并删除 useQuery 的 turbofish 语法。没有任何变化。
 
  let json_object = useQuery<IncomingData>("data_ex_key", async () => {
    try {
      const response = await axios.get('http://localhost:3000/api');
      return response.data;
    } catch (err) {
      throw err
    }
  });

  if (json_object.data !== undefined) {
    console.log(json_object.data.text_data);
  }
}

在控制台中,我得到了undefined的文字。問題是我已經使用了react-query調試器調試了這段程式碼,並顯示json_object查詢已成功取得資料。我可以存取這些數據,但無法存取其屬性,例如text_data

P粉621033928
P粉621033928

全部回覆(1)
P粉310931198

找到了一個解決方案。

需要使用陣列而不是單一物件。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板