回答編集履歴

4

コード追加

2021/10/13 15:44

投稿

退会済みユーザー
test CHANGED
@@ -1,131 +1 @@
1
- 検索ワドをstateにすればよろしいかと。
2
-
3
-
4
-
5
- ```jsx
6
-
7
- const App = () => {
8
-
9
- const [array, setArray] = useState([]);
10
-
11
- const [keyword, setKeyword] = useState('');
12
-
13
-
14
-
15
- useEffect(() => {
16
-
17
- fetch("https://jsonplaceholder.typicode.com/todos")
18
-
19
- .then((response) => response.json())
20
-
21
- .then((json) => {
22
-
23
- setArray(json);
24
-
25
- });
26
-
27
- }, []);
28
-
29
-
30
-
31
- const changeKeyword = ({ target }) => {
32
-
33
- setKeyword(target.value);
34
-
35
- }
36
-
37
-
38
-
39
- const filteredArray = keyword
40
-
41
- ? array.filter((data) => data.title.includes(keyword))
42
-
43
- : array;
44
-
45
-
46
-
47
- return (
48
-
49
- <div>
50
-
51
- <input type="text" onChange={changeKeyword} />
52
-
53
- <p>件数: {filteredArray.length}件</p>
54
-
55
- {filteredArray.map((data, index) => {
56
-
57
- return <p key={index}>{data.title}</p>;
58
-
59
- })}
60
-
61
- </div>
62
-
63
- );
64
-
65
- };
66
-
67
-
68
-
69
- ```
70
-
71
-    
72
-
73
-    
74
-
75
-    
76
-
77
- 以下は本題からは外れた補足です。
78
-
79
-
80
-
81
- #### 補足1. 引数名の修正
82
-
83
-
84
-
85
- fetchが成功したときの、2つめの `.then` に渡している関数の引数の名前が、以下
86
-
87
-
88
-
89
- ```javascript
90
-
91
- .then((json) => {
92
-
93
- setArray(json);
94
-
95
- ```
96
-
97
-
98
-
99
- のように、`json` になっていますが、2つめの `.then` に処理が進んだときは、すでにJSONがパースされたオブジェクトだったり配列だったりが渡されてくるので、少なくとも`json` ではない何かにしたほうがよく、たとえばAPIのリソース名にあわせて
100
-
101
-
102
-
103
- ```javascript
104
-
105
- .then((todos) => {
106
-
107
- setArray(todos);
108
-
109
- ```
110
-
111
- とするのがよいかもですね。
112
-
113
-
114
-
115
- #### 補足2. (参考)Recoil の利用
116
-
117
-
118
-
119
- APIから取得したデータを保存しておく場所として、useStateして確保したコンポーネントごとのstateに格納してもよいのですが、アプリケーションの規模が大きくなっていき複数の画面からAPIからのデータを使いたい場合、これまで[Redux](https://redux.js.org/)がよく使われていましたが、これに替わるライブラリとして注目されているのが[Recoil](https://recoiljs.org/)です。(現時点でまだバージョン 0.4.1 です)
120
-
121
-
122
-
123
- 参考までにご質問にあるcodesandboxのデモをforkして、Recoilを使うように修正してみました。
124
-
125
-
126
-
127
- - codesandbox: [Recoilを使ってみる](https://codesandbox.io/s/recoil-noli-yong-j1i7y)
128
-
129
-
130
-
131
- なお、上記のサンプルでは、React.Suspenseによるローディングアイコンの表示を確認するために、APIのリクエストする前に3秒待たせています。
1
+ ![イメジ説明](fc97dc977eadf941f7af4d3ab1539925.png)

3

コード追加

2021/10/13 15:43

投稿

退会済みユーザー
test CHANGED
@@ -68,13 +68,21 @@
68
68
 
69
69
  ```
70
70
 
71
+    
71
72
 
73
+    
72
74
 
75
+    
76
+
73
- 以下は本題からは外れる、補足です。
77
+ 以下は本題からは外れ補足です。
74
78
 
75
79
 
76
80
 
81
+ #### 補足1. 引数名の修正
82
+
83
+
84
+
77
- ちなみにfetchが成功したときの、2つめの `.then` に渡している関数の引数の名前が、以下
85
+ fetchが成功したときの、2つめの `.then` に渡している関数の引数の名前が、以下
78
86
 
79
87
 
80
88
 
@@ -101,3 +109,23 @@
101
109
  ```
102
110
 
103
111
  とするのがよいかもですね。
112
+
113
+
114
+
115
+ #### 補足2. (参考)Recoil の利用
116
+
117
+
118
+
119
+ APIから取得したデータを保存しておく場所として、useStateして確保したコンポーネントごとのstateに格納してもよいのですが、アプリケーションの規模が大きくなっていき複数の画面からAPIからのデータを使いたい場合、これまで[Redux](https://redux.js.org/)がよく使われていましたが、これに替わるライブラリとして注目されているのが[Recoil](https://recoiljs.org/)です。(現時点でまだバージョン 0.4.1 です)
120
+
121
+
122
+
123
+ 参考までにご質問にあるcodesandboxのデモをforkして、Recoilを使うように修正してみました。
124
+
125
+
126
+
127
+ - codesandbox: [Recoilを使ってみる](https://codesandbox.io/s/recoil-noli-yong-j1i7y)
128
+
129
+
130
+
131
+ なお、上記のサンプルでは、React.Suspenseによるローディングアイコンの表示を確認するために、APIのリクエストする前に3秒待たせています。

2

テキスト修正

2021/10/11 02:12

投稿

退会済みユーザー
test CHANGED
@@ -70,6 +70,8 @@
70
70
 
71
71
 
72
72
 
73
+ 以下は本題からは外れる、補足です。
74
+
73
75
 
74
76
 
75
77
  ちなみにfetchが成功したときの、2つめの `.then` に渡している関数の引数の名前が、以下

1

テキスト修正

2021/10/10 14:12

投稿

退会済みユーザー
test CHANGED
@@ -67,3 +67,35 @@
67
67
 
68
68
 
69
69
  ```
70
+
71
+
72
+
73
+
74
+
75
+ ちなみにfetchが成功したときの、2つめの `.then` に渡している関数の引数の名前が、以下
76
+
77
+
78
+
79
+ ```javascript
80
+
81
+ .then((json) => {
82
+
83
+ setArray(json);
84
+
85
+ ```
86
+
87
+
88
+
89
+ のように、`json` になっていますが、2つめの `.then` に処理が進んだときは、すでにJSONがパースされたオブジェクトだったり配列だったりが渡されてくるので、少なくとも`json` ではない何かにしたほうがよく、たとえばAPIのリソース名にあわせて
90
+
91
+
92
+
93
+ ```javascript
94
+
95
+ .then((todos) => {
96
+
97
+ setArray(todos);
98
+
99
+ ```
100
+
101
+ とするのがよいかもですね。