回答編集履歴
10
a
test
CHANGED
@@ -132,11 +132,11 @@
|
|
132
132
|
|
133
133
|
|
134
134
|
|
135
|
-
> Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.
|
135
|
+
> **Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.**
|
136
136
|
|
137
137
|
|
138
138
|
|
139
|
-
> setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.
|
139
|
+
> **setState() does not always immediately update the component. It may batch or defer the update until later.** This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.
|
140
140
|
|
141
141
|
|
142
142
|
|
9
a
test
CHANGED
@@ -141,3 +141,17 @@
|
|
141
141
|
|
142
142
|
|
143
143
|
[https://reactjs.org/docs/react-component.html#setstate](https://reactjs.org/docs/react-component.html#setstate)
|
144
|
+
|
145
|
+
|
146
|
+
|
147
|
+
# 補足
|
148
|
+
|
149
|
+
`componentDidUpdate(prevProps, prevState, snapshot)`
|
150
|
+
|
151
|
+
|
152
|
+
|
153
|
+
[https://reactjs.org/docs/react-component.html#componentdidupdate](https://reactjs.org/docs/react-component.html#componentdidupdate)
|
154
|
+
|
155
|
+
|
156
|
+
|
157
|
+
回答に載せたコードでは`componentWillUpdate`メソッドを使ってますが、React16.3以降では`componentWillUpdate`の利用を新規開発で利用するのは非推薦になっているので、代わりに`componentDidUpdate`で`state`の変更を確認するのが適切と言えます。(上の引用文の中でも`setState`メソッドのコールバックか、`componentDidMount`メソッド内で、、、と記載もありますね。)
|
8
a
test
CHANGED
@@ -125,3 +125,19 @@
|
|
125
125
|
|
126
126
|
|
127
127
|
もしくは、`state`が`update`された後に呼ばれるライフサイクルメソッド「`componentWillUpdate`」内で、変更後の`state`を確認しても良いかもしれません。
|
128
|
+
|
129
|
+
|
130
|
+
|
131
|
+
# 参考
|
132
|
+
|
133
|
+
|
134
|
+
|
135
|
+
> Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.
|
136
|
+
|
137
|
+
|
138
|
+
|
139
|
+
> setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.
|
140
|
+
|
141
|
+
|
142
|
+
|
143
|
+
[https://reactjs.org/docs/react-component.html#setstate](https://reactjs.org/docs/react-component.html#setstate)
|
7
componentWillUpdate
test
CHANGED
@@ -121,3 +121,7 @@
|
|
121
121
|
|
122
122
|
|
123
123
|
単に`this.setState`によって`state`が変更されているかをログ出力して確認したいだけであれば、`this.setState`メソッドは第2引数に`state`の変更が完了した後に呼ばれるコールバック関数を渡すことが出来るので、そちらのほうでログ出力してあげると良いかと思います。
|
124
|
+
|
125
|
+
|
126
|
+
|
127
|
+
もしくは、`state`が`update`された後に呼ばれるライフサイクルメソッド「`componentWillUpdate`」内で、変更後の`state`を確認しても良いかもしれません。
|
6
["a", "b", "c"]
test
CHANGED
@@ -40,13 +40,13 @@
|
|
40
40
|
|
41
41
|
}, () => {
|
42
42
|
|
43
|
-
console.log('callback', this.state.items); // ["a", "b", "c"]
|
43
|
+
console.log('callback', this.state.items); // ["a", "b", "c"]
|
44
|
-
|
45
|
-
|
46
44
|
|
47
45
|
})
|
48
46
|
|
49
47
|
|
48
|
+
|
49
|
+
console.log('まだnullのまま', this.state.items) // null
|
50
50
|
|
51
51
|
}
|
52
52
|
|
@@ -81,8 +81,6 @@
|
|
81
81
|
document.getElementById("root")
|
82
82
|
|
83
83
|
);
|
84
|
-
|
85
|
-
|
86
84
|
|
87
85
|
```
|
88
86
|
|
5
a
test
CHANGED
@@ -40,7 +40,9 @@
|
|
40
40
|
|
41
41
|
}, () => {
|
42
42
|
|
43
|
-
console.log('callback', this.state.items);
|
43
|
+
console.log('callback', this.state.items); // ["a", "b", "c"]
|
44
|
+
|
45
|
+
|
44
46
|
|
45
47
|
})
|
46
48
|
|
@@ -52,7 +54,7 @@
|
|
52
54
|
|
53
55
|
componentWillUpdate(nextProps, nextState) {
|
54
56
|
|
55
|
-
console.log('componentWillUpdate', nextState.items);
|
57
|
+
console.log('componentWillUpdate', nextState.items); // ["a", "b", "c"]
|
56
58
|
|
57
59
|
}
|
58
60
|
|
4
a
test
CHANGED
@@ -94,6 +94,14 @@
|
|
94
94
|
|
95
95
|
|
96
96
|
|
97
|
+
> 上記の感じで、配列をstate.countに入れたいのですが、nullのままになってしまいます。
|
98
|
+
|
99
|
+
|
100
|
+
|
101
|
+
結論から言いますと、正しく`state`の更新自体は出来ています。単に、`console.log`を差し込むタイミングが後述の理由により、不適切であるため、`null`となってしまうだけの話です。
|
102
|
+
|
103
|
+
|
104
|
+
|
97
105
|
```
|
98
106
|
|
99
107
|
this.setState({
|
3
a
test
CHANGED
@@ -94,8 +94,22 @@
|
|
94
94
|
|
95
95
|
|
96
96
|
|
97
|
+
```
|
98
|
+
|
97
|
-
|
99
|
+
this.setState({
|
100
|
+
|
101
|
+
count: list
|
102
|
+
|
103
|
+
});
|
104
|
+
|
105
|
+
console.log(this.state.count);//null
|
106
|
+
|
107
|
+
```
|
98
108
|
|
99
109
|
|
100
110
|
|
111
|
+
`this.setState`メソッドは非同期実行されるため、上記のように`this.setState`メソッドの実行直後に、`console.log`で変更後の`state`を確認しようとしても、その段階ではまだ、`state`の更新が実行すらされていません。そのため、結果は`null`となります。
|
112
|
+
|
113
|
+
|
114
|
+
|
101
|
-
|
115
|
+
単に`this.setState`によって`state`が変更されているかをログ出力して確認したいだけであれば、`this.setState`メソッドは第2引数に`state`の変更が完了した後に呼ばれるコールバック関数を渡すことが出来るので、そちらのほうでログ出力してあげると良いかと思います。
|
2
a
test
CHANGED
@@ -87,3 +87,15 @@
|
|
87
87
|
|
88
88
|
|
89
89
|
Demo => [https://codesandbox.io/s/qvzjm1q91q](https://codesandbox.io/s/qvzjm1q91q)
|
90
|
+
|
91
|
+
|
92
|
+
|
93
|
+
# 解説
|
94
|
+
|
95
|
+
|
96
|
+
|
97
|
+
`this.setState`メソッドは非同期実行されるため
|
98
|
+
|
99
|
+
|
100
|
+
|
101
|
+
(変なタイミングで保存投稿してしまいました。現在、編集中)
|
1
a
test
CHANGED
@@ -1,3 +1,5 @@
|
|
1
|
+
# コード
|
2
|
+
|
1
3
|
```ここに言語を入力
|
2
4
|
|
3
5
|
import React, { Component } from "react";
|
@@ -84,4 +86,4 @@
|
|
84
86
|
|
85
87
|
|
86
88
|
|
87
|
-
https://codesandbox.io/s/qvzjm1q91q
|
89
|
+
Demo => [https://codesandbox.io/s/qvzjm1q91q](https://codesandbox.io/s/qvzjm1q91q)
|