使用世界上最简单的React×TypeScript，从API获取数据的方法是什么？

背景

在React中从API获取数据的方法有很多，只要稍微搜索一下就可以找到很多结果。使用Axios是常见的选择。
然而，在TypeScript环境下，有用的信息突然变少了。

验证环境

• React v18.2.0

• Axios v1.3.4

• Windows 11

Linuxでも同様にデータ取得できます。

使用React和TypeScript构建项目。

• コマンドプロンプトもしくはPowerShellを開いて下記を実行する

• >npx create-react-app –template typescript myapp

動作することを確認する
>cd myapp
>npm start

ブラウザが開いて”Learn React”と表示されれば成功です。

使用 Axios 实现数据获取。

• やりたいこと

• GETメソッドで下記の郵便番号検索APIからデータを取得します

• https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060

まずaxiosをインストールします
>npm install axios

src/App.tsxのファイルを書き換える

import React from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

function App() {
  axios.get("https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060")
    .then((results) => {
      console.log(results.data);
    })
    .catch((error) => {
      console.log('失敗');
      console.log(error.status);
    });
  return (
    <div className="App">
(変更なし。以下省略)

F12キーを押してブラウザのデベロッパーツールのコンソールを見て郵便番号データを取得できていることを確認する。

将获取的数据显示在屏幕上

现在我们已经知道如何从API获取数据，但是我们仍然希望在屏幕上显示出来。让我们将”App.tsx”文件改写成这样吧。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

function App() {
  const { useState, useEffect } = React;
  const [message, getMessage] = useState("783-0060の都道府県は？");
  useEffect(() => {
    axios.get("https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060")
      .then((results) => {
        console.log(results.data);
        getMessage(results.data.results[0].address1);
      })
      .catch((error) => {
        console.log('失敗');
        console.log(error.status);
      });
  });
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <p>{message}</p>
      </header>
    </div>
  );
}

export default App;

• address1には都道府県名が入ります。

• そこで「Learn React」の下に郵便番号「783-0060」に対応する都道府県である「高知県」と表示されれば成功です。

• 変数messageでAPIから取得したデータを保持しており、関数getMessageで変数messageのデータ更新を行っています。

Reactのフック機能を使っています。useStateとuseEffectがキモですね。興味がある人は調べてください。

useAxiosを使うとフックを意識することなくAPIからデータ取得できるそうな。

创建一个新的类并在屏幕上显示出来

在React中，通常会为每个组件创建一个新的类。让我们试试这种方法。

新しくMyClass.tsxファイルを作成する

import React from 'react';
import axios from 'axios';

export default class MyClass extends React.Component {
  state = {message: "999-6852の都道府県は？"}

  componentDidMount() {
     axios.get("https://zipcloud.ibsnet.co.jp/api/search?zipcode=9996852")
      .then(res => {
        const mes = res.data.results[0].address1;
        console.log(mes)
        this.setState({message: mes});
      })
  }

  render() {
    return (
      <h1>
        {this.state.message}
      </h1>
    )
  }
}

index.tsxにMyClassを追加する

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import MyClass from './MyClass'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
    <MyClass />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();