質問編集履歴
6
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -372,12 +372,22 @@
|
|
|
372
372
|
|
|
373
373
|
- 説明のためにコメントをたくさん残しました
|
|
374
374
|
|
|
375
|
-
- 問題が React なのか JS なのか FastAPI なのかサーバーの設定なのか，それとも他にあるのか切り分けができていない状態です
|
|
375
|
+
- 問題が React なのか JS の書き方なのか FastAPI なのかサーバーの設定なのか，それとも他に何かあるのか，切り分けができていない状態です
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
376
|
+
|
|
377
|
+
|
|
378
|
+
|
|
379
|
-
ドキュメントや
|
|
379
|
+
公式ドキュメントや Google を活用してあらゆる方法をためしたのですが一日経っても解決しなかったため質問させていただきます．
|
|
380
|
-
|
|
380
|
+
|
|
381
|
+
|
|
382
|
+
|
|
381
|
-
書き方も then catch ではなく async await にしたり jsx のフォームを変えたりしてみました
|
|
383
|
+
書き方も then catch ではなく async await にしたり jsx のフォームを変えたりしてみましたがうまく動作しませんでした．
|
|
384
|
+
|
|
385
|
+
|
|
386
|
+
|
|
382
|
-
|
|
387
|
+
サーバーのログに実行の形跡があるパターンと，そもそも API が叩かれていない時と2パターンあります．
|
|
388
|
+
|
|
389
|
+
|
|
390
|
+
|
|
383
|
-
助けていただけると幸いです！
|
|
391
|
+
助けていただけると幸いです！
|
|
392
|
+
|
|
393
|
+
よろしくお願いいたします！
|
5
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -60,26 +60,24 @@
|
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
|
63
|
-
## デバッグ
|
|
63
|
+
## デバッグ
|
|
64
|
-
|
|
64
|
+
|
|
65
|
-
- React で
|
|
65
|
+
- React で Form を作成 ( materialUI の TextField, Button を使用 )
|
|
66
|
-
|
|
66
|
+
|
|
67
|
-
-
|
|
67
|
+
- Form が送信されるとサービスクラスのメソッドが呼ばれる
|
|
68
|
-
|
|
68
|
+
|
|
69
|
-
- このメソッド
|
|
69
|
+
- このメソッドに axios.get() がある
|
|
70
|
-
|
|
70
|
+
|
|
71
|
-
- axios.get() の前後にある console.log は表示されるが axios.get().then().catch.finally() は動いていない
|
|
71
|
+
- axios.get() の前後にある console.log は表示されるが axios.get()に繋げた .then().catch.finally() は動いていない
|
|
72
72
|
|
|
73
73
|
- デプロイされているサーバのログに実行されたログがあり 200 で正常に動いている
|
|
74
74
|
|
|
75
|
-
- get で送られてきたデータも入っている上バックエンドの処理も実行されており問題ないように見える
|
|
75
|
+
- ログには get で送られてきたデータも入っている上バックエンドの処理も実行されており問題ないように見える
|
|
76
|
-
|
|
76
|
+
|
|
77
|
-
- なので axios.get() 自体は動いているが then() には入らないという状態
|
|
77
|
+
- なので axios.get() 自体は動いているが then() には入らないという状態？
|
|
78
78
|
|
|
79
79
|
- ブラウザのデベロッパツールでネットワークを確認するもエラーなどは何もない
|
|
80
80
|
|
|
81
|
-
- バックエンドはブラウザや postman / curl から叩くと正常に動いている
|
|
82
|
-
|
|
83
81
|
|
|
84
82
|
|
|
85
83
|
## ソースコード
|
|
@@ -366,12 +364,16 @@
|
|
|
366
364
|
|
|
367
365
|
|
|
368
366
|
|
|
367
|
+
## 備考
|
|
368
|
+
|
|
369
|
-
- react や nodejs, axios, fastapi,
|
|
369
|
+
- react や nodejs, axios, fastapi, Deta はすべて初めて使っています．
|
|
370
370
|
|
|
371
371
|
- 変数名・関数名などが適当ですみません，サクッと試そうとしたため適当になっています
|
|
372
372
|
|
|
373
373
|
- 説明のためにコメントをたくさん残しました
|
|
374
374
|
|
|
375
|
+
- 問題が React なのか JS なのか FastAPI なのかサーバーの設定なのか，それとも他にあるのか切り分けができていない状態です。
|
|
376
|
+
|
|
375
377
|
|
|
376
378
|
|
|
377
379
|
ドキュメントや google を活用して色々ためしたのですが一日経っても解決しなかったため質問させていただきます．
|
4
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,17 +18,27 @@
|
|
|
18
18
|
|
|
19
19
|
### できないこと
|
|
20
20
|
|
|
21
|
-
Form が送信されると axios がバックエンドの API を叩くようにしようとしていますが，
|
|
21
|
+
Form が送信されると axios がバックエンドの API を叩くようにしようとしていますが，意図通りに動作しません．
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
22
|
-
|
|
25
|
+
Form が送信されバックエンドの API が叩かれている形跡はあるが値が返ってこない上にエラーなども出ていない
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
23
|
-
|
|
29
|
+
### やったこと
|
|
24
|
-
|
|
30
|
+
|
|
25
|
-
-
|
|
31
|
+
- フロントはローカルで立ち上げたもので実行してもデプロイしたものから実行しても挙動は同じ
|
|
26
|
-
|
|
32
|
+
|
|
27
|
-
-
|
|
33
|
+
- Form を作成し TextField ( materialUI ) に入力された文字列を送信する
|
|
28
|
-
|
|
34
|
+
|
|
29
|
-
- バックエンドは FastAPI (
|
|
35
|
+
- バックエンドは FastAPI ( Python ) で作成し [Deta](https://www.deta.sh/) という PasS / BaaS にデプロイ済み
|
|
30
|
-
|
|
36
|
+
|
|
31
|
-
- エラーは一切でない
|
|
37
|
+
- エラーメッセージなどは一切でない
|
|
38
|
+
|
|
39
|
+
- サーバのログには 200 番で成功した旨が表示されている
|
|
40
|
+
|
|
41
|
+
- Postman や curl で叩くと成功している
|
|
32
42
|
|
|
33
43
|
|
|
34
44
|
|
|
@@ -46,13 +56,11 @@
|
|
|
46
56
|
|
|
47
57
|
## 背景
|
|
48
58
|
|
|
49
|
-
React と FastAPI を使ってフロントとバックエンドをつないだアプリの作成に入門しようとしています．
|
|
50
|
-
|
|
51
|
-
|
|
59
|
+
React と FastAPI を使ってフロントとバックエンドをつないだアプリ開発の勉強を独学で行っています．ベストプラクティスなどはきちんと把握しておらず基本的には使っている技術のドキュメントに沿って進めています．
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
55
|
-
##
|
|
63
|
+
## デバッグで試したこと
|
|
56
64
|
|
|
57
65
|
- React で form を作成 ( materialUI の TextField, Button を使用 )
|
|
58
66
|
|
3
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,16 +1,24 @@
|
|
|
1
|
-
# 【React×FastAPI】
|
|
1
|
+
# 【React×FastAPI】axiosでAPIを叩き値を返したいが値は返らずエラーも出ない
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
## 概要
|
|
6
6
|
|
|
7
|
+
React で簡単な SPA を作成し Firebase にデプロイしました．その中で文字列を送信する Form を作成してあります．
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
バックエンドは FastAPI で作成して Deta という PaaS/BaaS にデプロイしてあります．
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
フロントエンドとバックエンドが繋げられているかテストするために，Form から文字列が送信されたらバックエンド側で別の文字列を付け足して返す，という処理をしようとしています．
|
|
16
|
+
|
|
7
17
|
|
|
8
18
|
|
|
9
19
|
### できないこと
|
|
10
20
|
|
|
11
|
-
React で簡単な SPA を作成し，その中で form を作成
|
|
12
|
-
|
|
13
|
-
|
|
21
|
+
Form が送信されると axios がバックエンドの API を叩くようにしようとしていますが，うまく動作しません．
|
|
14
22
|
|
|
15
23
|
|
|
16
24
|
|
2
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
【React×FastAPI】axiosでAPIを叩き値を返したい
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 【React×FastAPI】React (axios)でバックエンドのAPI(FastAPI)を叩きデータを取得しようとしているがデータが表示されずエラーも出ない
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
1
書式の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
|
|
73
73
|
### フロント
|
|
74
74
|
|
|
75
|
-
- React ( Screen.jsx )
|
|
75
|
+
- React ( src/screens/Screen.jsx )
|
|
76
76
|
|
|
77
77
|
```
|
|
78
78
|
|
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
|
|
211
211
|
|
|
212
212
|
|
|
213
|
-
- /services/test/apiTest.js
|
|
213
|
+
- src/services/test/apiTest.js
|
|
214
214
|
|
|
215
215
|
```
|
|
216
216
|
|
|
@@ -272,7 +272,7 @@
|
|
|
272
272
|
|
|
273
273
|
|
|
274
274
|
|
|
275
|
-
- main.py ( Deta にデプロイされている fastapi )
|
|
275
|
+
- app/main.py ( Deta にデプロイされている fastapi )
|
|
276
276
|
|
|
277
277
|
```
|
|
278
278
|
|
|
@@ -332,7 +332,7 @@
|
|
|
332
332
|
|
|
333
333
|
|
|
334
334
|
|
|
335
|
-
- services/test.py
|
|
335
|
+
- app/services/test.py
|
|
336
336
|
|
|
337
337
|
|
|
338
338
|
|