回答編集履歴
1
書式の改善
answer
CHANGED
|
@@ -9,16 +9,16 @@
|
|
|
9
9
|
例えば、todos = ['aaa', 'bbb', 'ccc'] で、bbb にチェックしたとします。
|
|
10
10
|
|
|
11
11
|
```
|
|
12
|
-
<List key={0} todo='aaa' index={0} /> <!-- state
|
|
12
|
+
<List key={0} todo='aaa' index={0} /> <!-- state = { active: false } -->
|
|
13
|
-
<List key={1} todo='bbb' index={1} /> <!-- state
|
|
13
|
+
<List key={1} todo='bbb' index={1} /> <!-- state = { active: true } -->
|
|
14
|
-
<List key={2} todo='ccc' index={2} /> <!-- state
|
|
14
|
+
<List key={2} todo='ccc' index={2} /> <!-- state = { active: false } -->
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
ここで aaa を削除すると、次のようになります。
|
|
18
18
|
|
|
19
19
|
```
|
|
20
|
-
<List key={0} todo='bbb' index={0} /> <!-- state
|
|
20
|
+
<List key={0} todo='bbb' index={0} /> <!-- state = { active: false } -->
|
|
21
|
-
<List key={1} todo='ccc' index={1} /> <!-- state
|
|
21
|
+
<List key={1} todo='ccc' index={1} /> <!-- state = { active: true } -->
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
つまり、<List key={2} /> が <List key={1} />、<List key={1} /> が <List key={0} /> になる (active の値も移動する) のではなく、<List key={0} /> や <List key={1} /> は active の値も含め、そのままの位置で、todo の文字列だけが書き変わる (<List key={2} /> はなくなる) ために、期待とは異なる要素が削除されたように見えています。
|