ReactとFlaskを連携させてみる part2

目的

前に書いた記事ではFlask→Reactは実施しても、React→Flask→Reactは実施できていなかったのでやってみる

記事はこちら↓

実際にやってみた

フロー

Reactでエディットに値を入力し、ボタン押下でFlaskに値を渡します。
渡された値を計算し、Reactに計算結果を返すアプリにしてみます。

import { useState } from 'react';
import './App.css';
import axios from "axios";

interface Data {
  value: number;
}

function App() {
  const [value, setValue] = useState<string>('');
  const [result, setResult] = useState<number | null>(null);

  const handleSubmit = () => {
    const data: Data = {
      value: parseInt(value),
    };

    axios.post('api/data', data)
      .then((response) => {
        setResult(response.data.result);
      })
      .catch((error) => console.error(error));
  };

  return (
    <div className='App'>
      <header className='App-header'>
        <input
          type="number"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
        <button onClick={handleSubmit}>おす</button>
        {result && <p>けっか: {result}</p>}
      </header>
    </div>
  );
};

export default App;

Flaskでは受け取った値を2倍し、計算結果を返します。

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/', methods=['get'])
def get_data():
    return "Hello World"

@app.route('/api/data', methods=['POST'])
def post_data():
    data = request.get_json()
    double_value = data['value'] * 2
    return jsonify({'result': double_value})

if __name__ == '__main__':
    app.run(port=5000, debug=True)

実際に動かしてみる

しっかり反映されました。