回答編集履歴
10
a
answer
CHANGED
|
@@ -65,9 +65,9 @@
|
|
|
65
65
|
|
|
66
66
|
# 参考
|
|
67
67
|
|
|
68
|
-
> 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.
|
|
68
|
+
> **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.**
|
|
69
69
|
|
|
70
|
-
> 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.
|
|
70
|
+
> **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.
|
|
71
71
|
|
|
72
72
|
[https://reactjs.org/docs/react-component.html#setstate](https://reactjs.org/docs/react-component.html#setstate)
|
|
73
73
|
|
9
a
answer
CHANGED
|
@@ -69,4 +69,11 @@
|
|
|
69
69
|
|
|
70
70
|
> 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.
|
|
71
71
|
|
|
72
|
-
[https://reactjs.org/docs/react-component.html#setstate](https://reactjs.org/docs/react-component.html#setstate)
|
|
72
|
+
[https://reactjs.org/docs/react-component.html#setstate](https://reactjs.org/docs/react-component.html#setstate)
|
|
73
|
+
|
|
74
|
+
# 補足
|
|
75
|
+
`componentDidUpdate(prevProps, prevState, snapshot)`
|
|
76
|
+
|
|
77
|
+
[https://reactjs.org/docs/react-component.html#componentdidupdate](https://reactjs.org/docs/react-component.html#componentdidupdate)
|
|
78
|
+
|
|
79
|
+
回答に載せたコードでは`componentWillUpdate`メソッドを使ってますが、React16.3以降では`componentWillUpdate`の利用を新規開発で利用するのは非推薦になっているので、代わりに`componentDidUpdate`で`state`の変更を確認するのが適切と言えます。（上の引用文の中でも`setState`メソッドのコールバックか、`componentDidMount`メソッド内で、、、と記載もありますね。)
|
8
a
answer
CHANGED
|
@@ -61,4 +61,12 @@
|
|
|
61
61
|
|
|
62
62
|
単に`this.setState`によって`state`が変更されているかをログ出力して確認したいだけであれば、`this.setState`メソッドは第２引数に`state`の変更が完了した後に呼ばれるコールバック関数を渡すことが出来るので、そちらのほうでログ出力してあげると良いかと思います。
|
|
63
63
|
|
|
64
|
-
もしくは、`state`が`update`された後に呼ばれるライフサイクルメソッド「`componentWillUpdate`」内で、変更後の`state`を確認しても良いかもしれません。
|
|
64
|
+
もしくは、`state`が`update`された後に呼ばれるライフサイクルメソッド「`componentWillUpdate`」内で、変更後の`state`を確認しても良いかもしれません。
|
|
65
|
+
|
|
66
|
+
# 参考
|
|
67
|
+
|
|
68
|
+
> 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.
|
|
69
|
+
|
|
70
|
+
> 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.
|
|
71
|
+
|
|
72
|
+
[https://reactjs.org/docs/react-component.html#setstate](https://reactjs.org/docs/react-component.html#setstate)
|
7
componentWillUpdate
answer
CHANGED
|
@@ -59,4 +59,6 @@
|
|
|
59
59
|
|
|
60
60
|
`this.setState`メソッドは非同期実行されるため、上記のように`this.setState`メソッドの実行直後に、`console.log`で変更後の`state`を確認しようとしても、その段階ではまだ、`state`の更新が実行すらされていません。そのため、結果は`null`となります。
|
|
61
61
|
|
|
62
|
-
単に`this.setState`によって`state`が変更されているかをログ出力して確認したいだけであれば、`this.setState`メソッドは第２引数に`state`の変更が完了した後に呼ばれるコールバック関数を渡すことが出来るので、そちらのほうでログ出力してあげると良いかと思います。
|
|
62
|
+
単に`this.setState`によって`state`が変更されているかをログ出力して確認したいだけであれば、`this.setState`メソッドは第２引数に`state`の変更が完了した後に呼ばれるコールバック関数を渡すことが出来るので、そちらのほうでログ出力してあげると良いかと思います。
|
|
63
|
+
|
|
64
|
+
もしくは、`state`が`update`された後に呼ばれるライフサイクルメソッド「`componentWillUpdate`」内で、変更後の`state`を確認しても良いかもしれません。
|
6
["a", "b", "c"]
answer
CHANGED
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
this.setState({
|
|
20
20
|
items: newItems
|
|
21
21
|
}, () => {
|
|
22
|
-
console.log('callback', this.state.items); // ["a", "b", "c"]
|
|
22
|
+
console.log('callback', this.state.items); // ["a", "b", "c"]
|
|
23
|
-
|
|
24
23
|
})
|
|
25
24
|
|
|
25
|
+
console.log('まだnullのまま', this.state.items) // null
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
componentWillUpdate(nextProps, nextState) {
|
|
@@ -40,7 +40,6 @@
|
|
|
40
40
|
<App />,
|
|
41
41
|
document.getElementById("root")
|
|
42
42
|
);
|
|
43
|
-
|
|
44
43
|
```
|
|
45
44
|
|
|
46
45
|
Demo => [https://codesandbox.io/s/qvzjm1q91q](https://codesandbox.io/s/qvzjm1q91q)
|
5
a
answer
CHANGED
|
@@ -19,13 +19,14 @@
|
|
|
19
19
|
this.setState({
|
|
20
20
|
items: newItems
|
|
21
21
|
}, () => {
|
|
22
|
-
console.log('callback', this.state.items);
|
|
22
|
+
console.log('callback', this.state.items); // ["a", "b", "c"]
|
|
23
|
+
|
|
23
24
|
})
|
|
24
25
|
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
componentWillUpdate(nextProps, nextState) {
|
|
28
|
-
console.log('componentWillUpdate', nextState.items);
|
|
29
|
+
console.log('componentWillUpdate', nextState.items); // ["a", "b", "c"]
|
|
29
30
|
}
|
|
30
31
|
|
|
31
32
|
render() {
|
4
a
answer
CHANGED
|
@@ -46,6 +46,10 @@
|
|
|
46
46
|
|
|
47
47
|
# 解説
|
|
48
48
|
|
|
49
|
+
> 上記の感じで、配列をstate.countに入れたいのですが、nullのままになってしまいます。
|
|
50
|
+
|
|
51
|
+
結論から言いますと、正しく`state`の更新自体は出来ています。単に、`console.log`を差し込むタイミングが後述の理由により、不適切であるため、`null`となってしまうだけの話です。
|
|
52
|
+
|
|
49
53
|
```
|
|
50
54
|
this.setState({
|
|
51
55
|
count: list
|
3
a
answer
CHANGED
|
@@ -46,6 +46,13 @@
|
|
|
46
46
|
|
|
47
47
|
# 解説
|
|
48
48
|
|
|
49
|
+
```
|
|
49
|
-
|
|
50
|
+
this.setState({
|
|
51
|
+
count: list
|
|
52
|
+
});
|
|
53
|
+
console.log(this.state.count);//null
|
|
54
|
+
```
|
|
50
55
|
|
|
56
|
+
`this.setState`メソッドは非同期実行されるため、上記のように`this.setState`メソッドの実行直後に、`console.log`で変更後の`state`を確認しようとしても、その段階ではまだ、`state`の更新が実行すらされていません。そのため、結果は`null`となります。
|
|
57
|
+
|
|
51
|
-
|
|
58
|
+
単に`this.setState`によって`state`が変更されているかをログ出力して確認したいだけであれば、`this.setState`メソッドは第２引数に`state`の変更が完了した後に呼ばれるコールバック関数を渡すことが出来るので、そちらのほうでログ出力してあげると良いかと思います。
|
2
a
answer
CHANGED
|
@@ -42,4 +42,10 @@
|
|
|
42
42
|
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
Demo => [https://codesandbox.io/s/qvzjm1q91q](https://codesandbox.io/s/qvzjm1q91q)
|
|
45
|
+
Demo => [https://codesandbox.io/s/qvzjm1q91q](https://codesandbox.io/s/qvzjm1q91q)
|
|
46
|
+
|
|
47
|
+
# 解説
|
|
48
|
+
|
|
49
|
+
`this.setState`メソッドは非同期実行されるため
|
|
50
|
+
|
|
51
|
+
（変なタイミングで保存投稿してしまいました。現在、編集中）
|
1
a
answer
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
# コード
|
|
1
2
|
```ここに言語を入力
|
|
2
3
|
import React, { Component } from "react";
|
|
3
4
|
import ReactDOM from "react-dom";
|
|
@@ -41,4 +42,4 @@
|
|
|
41
42
|
|
|
42
43
|
```
|
|
43
44
|
|
|
44
|
-
https://codesandbox.io/s/qvzjm1q91q
|
|
45
|
+
Demo => [https://codesandbox.io/s/qvzjm1q91q](https://codesandbox.io/s/qvzjm1q91q)
|