回答編集履歴
1
ソース修正
answer
CHANGED
|
@@ -3,4 +3,24 @@
|
|
|
3
3
|
- setTodos(newTodos);
|
|
4
4
|
+ setTodos(newTodos.map((e, i) => ({ ...e, id: i + 1 })));
|
|
5
5
|
```
|
|
6
|
-
そやけど、これ `id`やなくて、ただの行番号って感じやな。ま、好きにせえ。
|
|
6
|
+
そやけど、これ `id`やなくて、ただの行番号って感じやな。ま、好きにせえ。
|
|
7
|
+
|
|
8
|
+
**追記:**
|
|
9
|
+
|
|
10
|
+
上のは、修正を一行で済ませて、質問にあるコードをなるべく生かす案やけど、ワテなら`onClickDelete` をこないに書くと思いますわ。
|
|
11
|
+
|
|
12
|
+
```diff
|
|
13
|
+
const onClickDelete = (index) => {
|
|
14
|
+
- const newTodos = [...todos];
|
|
15
|
+
- newTodos.splice(index, 1);
|
|
16
|
+
- setTodos(newTodos);
|
|
17
|
+
+ setTodos(
|
|
18
|
+
+ todos.filter((_, i) => i !== index).map((e, i) => ({ ...e, id: i + 1 }))
|
|
19
|
+
+ );
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
あ、あと、関数名も `onClickDelete` やなく、 `handleDelete` にするかも。なぜゆうたら
|
|
25
|
+
- イベントリスナーの変数名に`handle`をプレフィックスにするのは、しばしば見られる慣習
|
|
26
|
+
- 要素の削除は、（今のところはクリックだけがトリガーでも、）クリックだけによって生じるものではないから
|