回答編集履歴
2
補足
test
CHANGED
|
@@ -17,3 +17,39 @@
|
|
|
17
17
|
return (
|
|
18
18
|
<div className="shop-list">
|
|
19
19
|
```
|
|
20
|
+
|
|
21
|
+
### 補足
|
|
22
|
+
|
|
23
|
+
質問にあるコードだとレスポンスに含まれる配列 `response.data.results.shop`の含む要素の個数分、`for`ループが回ってその回数だけ `setShoplist` でstate更新をしてしまうことになりますが、それを避けるため以下のようにするとよいかと思います。
|
|
24
|
+
|
|
25
|
+
```diff
|
|
26
|
+
- const responseShopList = response.data.results.shop;
|
|
27
|
+
- for (const item of responseShopList) {
|
|
28
|
+
- //ここでうまく情報をセットできていない感じがする
|
|
29
|
+
- setShoplist((prevState) => [...prevState,
|
|
30
|
+
- {
|
|
31
|
+
- id: item.id,
|
|
32
|
+
- photoPcM: item.photo.pc.m,
|
|
33
|
+
- shopName: item.name,
|
|
34
|
+
- lunch: item.lunch,
|
|
35
|
+
- budgetName: item.budget.name,
|
|
36
|
+
- large_areaName: item.large_area.name,
|
|
37
|
+
- Access: item.access
|
|
38
|
+
- }
|
|
39
|
+
- ]);
|
|
40
|
+
- }
|
|
41
|
+
+ const responseShopList = response.data.results.shop.map(item => (
|
|
42
|
+
+ {
|
|
43
|
+
+ id: item.id,
|
|
44
|
+
+ photoPcM: item.photo.pc.m,
|
|
45
|
+
+ shopName: item.name,
|
|
46
|
+
+ lunch: item.lunch,
|
|
47
|
+
+ budgetName: item.budget.name,
|
|
48
|
+
+ large_areaName: item.large_area.name,
|
|
49
|
+
+ Access: item.access
|
|
50
|
+
+ }
|
|
51
|
+
+ ));
|
|
52
|
+
+ setShoplist((prevState) => [...prevState, ...responseShopList]);
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
|
1
誤字修正
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
`then` のコールバックの中で`setShoplist` したことによってstateの変更が即座に反映されて変更後の`shopList` が `finally` のコールバックの中ですぐに確認できるわけ**ではない**です。
|
|
2
2
|
|
|
3
|
-
ですので、console.logしている行を、質問にあるコードが記載されたコ
|
|
3
|
+
ですので、console.logしている行を、質問にあるコードが記載されたコンポーネントの中で JSXをreturnする直前に移動してみるといかがでしょうか？
|
|
4
4
|
|
|
5
5
|
サンプル的なコードで説明すると以下のような感じの移動です。
|
|
6
6
|
```diff
|