回答編集履歴
2
不要な記述削除
test
CHANGED
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
- 選択している一意のユーザーデータをstate管理し、比較をすることで対象のレコードのみを表示させる
|
|
8
8
|
- 一意のユーザーデータがなければ動かないです。。。
|
|
9
9
|
- levelによる表示の区別は不要と思いましたので削除しました
|
|
10
|
-
-
|
|
11
10
|
|
|
12
11
|
## 修正後のコード
|
|
13
12
|
```js
|
|
@@ -49,4 +48,3 @@
|
|
|
49
48
|
)
|
|
50
49
|
}
|
|
51
50
|
```
|
|
52
|
-
|
1
コメント修正
test
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
あまり綺麗ではないですが。。。
|
|
2
|
+
## 問題
|
|
3
|
+
- `isOpen` `setIsOpen`がユーザーのレコードごとに存在していないこと
|
|
4
|
+
- Listコンポーネント内に`isOpen` `setIsOpen` が一つしか存在していないため、あるユーザーをクリックすると全てのユーザーの情報が表示されてしまっていた
|
|
2
5
|
|
|
3
|
-
## 方針
|
|
6
|
+
## 修正方針
|
|
4
|
-
- 選択している一意のユーザーデータを
|
|
7
|
+
- 選択している一意のユーザーデータをstate管理し、比較をすることで対象のレコードのみを表示させる
|
|
5
8
|
- 一意のユーザーデータがなければ動かないです。。。
|
|
6
9
|
- levelによる表示の区別は不要と思いましたので削除しました
|
|
10
|
+
-
|
|
7
11
|
|
|
8
12
|
## 修正後のコード
|
|
9
13
|
```js
|
|
@@ -19,11 +23,11 @@
|
|
|
19
23
|
// このコンポーネント内で管理されるstateを上位の方にまとめておくと読みやすくなります
|
|
20
24
|
const [users, setUsers] = useState([]);
|
|
21
25
|
const [selectedName, setSelectedName] = useState('') // 一意に定まるデータがあるのであれば、それをstateとして管理する。（ここではnameを代用します）
|
|
22
|
-
// その次にアクション
|
|
26
|
+
// その次にアクション
|
|
23
27
|
useEffect(() => {
|
|
24
28
|
getUsers();
|
|
25
29
|
}, []);
|
|
26
|
-
// onClickのアクションを
|
|
30
|
+
// onClickのアクションをuser.nameが一致しているかどうかで分ける
|
|
27
31
|
const onClick = (name) => {
|
|
28
32
|
selectedName === name ? setSelectedName("") : setSelectedName(name);
|
|
29
33
|
};
|