使用React-Query和Axios将JSON数据解析为TypeScript对象的简单方法

Question

这是我从服务器接收到的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。

Answer 1

找到了一个解决方案。

需要使用数组而不是单个对象。