ReactとFlaskを連携させてみる part2
React→Flask→Reactのデータフロー実装について。FlaskとReactの連携part2。
目次
目的
前に書いた記事ではFlask→Reactは実施しても、React→Flask→Reactは実施できていなかったのでやってみる
記事はこちら↓
React + Flaskを連携させてみる - Qiita
目的 ReactとFlaskを使用したアプリケーションを作りたい。 そのまえに一度連携させて色々反映させてみる。 フロー Projectの作成 ディレクトリ構成はフロントエンドとバックエンドで分けることにしました。 参考記事→https://qiita.com/mih...
実際にやってみた
フロー
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)実際に動かしてみる
しっかり反映されました。
