回答編集履歴
3
ついき
test
CHANGED
|
@@ -113,3 +113,11 @@
|
|
|
113
113
|
|
|
114
114
|
|
|
115
115
|
[https://codesandbox.io/s/4826klkk4](https://codesandbox.io/s/4826klkk4)
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
# 簡単にポイント
|
|
120
|
+
|
|
121
|
+
1. this.setStateメソッドは非同期実行される為、this.setStateメソッドの中でthis.stateを参照したいような場合は、上記掲載コードのようにthis.setStateメソッドが取る第一引数に渡ってくるpreviousStateを参照して、そちらを利用する
|
|
122
|
+
|
|
123
|
+
2. 今回のようにネストが深く、更新対象が配列の中にあるアイテムやオブジェクトである場合は、そのコピーを作ってから、更新をする。reactでstateを直接書き換えてしまうのはNGであるため。
|
2
しゅうせい
test
CHANGED
|
@@ -48,13 +48,13 @@
|
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
|
|
51
|
-
// const updatedCount = Object.assign({}, this.state.counts[0], test: 100});
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
this.setState((prevState) => {
|
|
54
52
|
|
|
55
53
|
|
|
56
54
|
|
|
55
|
+
// const updatedCount = Object.assign({}, prevState.counts[0], test: 100});
|
|
56
|
+
|
|
57
|
-
|
|
57
|
+
const updatedCount = { ...prevState.counts[0], test: 100 };
|
|
58
58
|
|
|
59
59
|
|
|
60
60
|
|
|
@@ -104,6 +104,8 @@
|
|
|
104
104
|
|
|
105
105
|
|
|
106
106
|
|
|
107
|
+
|
|
108
|
+
|
|
107
109
|
```
|
|
108
110
|
|
|
109
111
|
|
1
5
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
以下、質問内容通り、配列の
|
|
5
|
+
以下、質問内容通り、配列の最初のアイテムを更新するという決め打ちコードではありますが、
|
|
6
6
|
|
|
7
7
|
実際は、指定された配列のindexに対するアイテムを更新するみたいに汎用性を高めたコードにする必要があるかと思います。また、配列内のオブジェクトの中にさらに配列やオブジェクトがあった場合、ちゃんと更新対象のアイテムをディープコピーしてあげる必要が出てくるので、さらに面倒臭くなります。その場合は、ディープコピーを簡単にしてくれるライブラリを使ってあげると良いと思います。
|
|
8
8
|
|