回答編集履歴

10

a

2018/07/05 03:57

投稿

HayatoKamono
HayatoKamono

スコア2415

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

2018/07/05 03:57

投稿

HayatoKamono
HayatoKamono

スコア2415

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

2018/07/05 03:56

投稿

HayatoKamono
HayatoKamono

スコア2415

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

2018/07/05 03:50

投稿

HayatoKamono
HayatoKamono

スコア2415

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"]

2018/07/05 03:46

投稿

HayatoKamono
HayatoKamono

スコア2415

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

2018/07/05 03:43

投稿

HayatoKamono
HayatoKamono

スコア2415

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

2018/07/05 03:40

投稿

HayatoKamono
HayatoKamono

スコア2415

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

2018/07/05 03:38

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -94,8 +94,22 @@
94
94
 
95
95
 
96
96
 
97
+ ```
98
+
97
- `this.setState`メソッドは非同期実行されるため
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

2018/07/05 03:37

投稿

HayatoKamono
HayatoKamono

スコア2415

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

2018/07/05 03:33

投稿

HayatoKamono
HayatoKamono

スコア2415

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)