回答編集履歴
3
ついき
answer
CHANGED
|
@@ -55,4 +55,8 @@
|
|
|
55
55
|
```
|
|
56
56
|
|
|
57
57
|
|
|
58
|
-
[https://codesandbox.io/s/4826klkk4](https://codesandbox.io/s/4826klkk4)
|
|
58
|
+
[https://codesandbox.io/s/4826klkk4](https://codesandbox.io/s/4826klkk4)
|
|
59
|
+
|
|
60
|
+
# 簡単にポイント
|
|
61
|
+
1. this.setStateメソッドは非同期実行される為、this.setStateメソッドの中でthis.stateを参照したいような場合は、上記掲載コードのようにthis.setStateメソッドが取る第一引数に渡ってくるpreviousStateを参照して、そちらを利用する
|
|
62
|
+
2. 今回のようにネストが深く、更新対象が配列の中にあるアイテムやオブジェクトである場合は、そのコピーを作ってから、更新をする。reactでstateを直接書き換えてしまうのはNGであるため。
|
2
しゅうせい
answer
CHANGED
|
@@ -23,11 +23,11 @@
|
|
|
23
23
|
|
|
24
24
|
handleButtonClick() {
|
|
25
25
|
|
|
26
|
-
// const updatedCount = Object.assign({}, this.state.counts[0], test: 100});
|
|
27
|
-
const updatedCount = { ...this.state.counts[0], test: 100 };
|
|
28
|
-
|
|
29
26
|
this.setState((prevState) => {
|
|
30
27
|
|
|
28
|
+
// const updatedCount = Object.assign({}, prevState.counts[0], test: 100});
|
|
29
|
+
const updatedCount = { ...prevState.counts[0], test: 100 };
|
|
30
|
+
|
|
31
31
|
const updatedCounts = [updatedCount, ...prevState.counts.slice(1)]
|
|
32
32
|
|
|
33
33
|
return {
|
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
|
|
52
52
|
render(<App />, document.getElementById('root'));
|
|
53
53
|
|
|
54
|
+
|
|
54
55
|
```
|
|
55
56
|
|
|
56
57
|
|
1
5
answer
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
ネストされたstateの更新は結構面倒臭いです。
|
|
2
2
|
|
|
3
|
-
以下、質問内容通り、配列の
|
|
3
|
+
以下、質問内容通り、配列の最初のアイテムを更新するという決め打ちコードではありますが、
|
|
4
4
|
実際は、指定された配列のindexに対するアイテムを更新するみたいに汎用性を高めたコードにする必要があるかと思います。また、配列内のオブジェクトの中にさらに配列やオブジェクトがあった場合、ちゃんと更新対象のアイテムをディープコピーしてあげる必要が出てくるので、さらに面倒臭くなります。その場合は、ディープコピーを簡単にしてくれるライブラリを使ってあげると良いと思います。
|
|
5
5
|
|
|
6
6
|
# サンプルコード
|