回答編集履歴
9
これで依存関係クリアしてるかな？
test
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
2つ原因があったようです。
|
|
2
2
|
|
|
3
3
|
## 原因１：子コンポーネントでフックを制御しても、ステートは更新されない。
|
|
4
|
-
useStateフックを子コンポーネントで制御させているの
|
|
4
|
+
useStateフックを子コンポーネントで制御させているのが気になった（動くかどうか検証した結果、動きませんでした）ので、親コンポーネントにフックとメソッドを移動させたところ、useStateフックで制御された値は更新されていきました。
|
|
5
5
|
|
|
6
6
|
このように答えている人もいるようです。
|
|
7
7
|
[React Hook : Send data from child to parent component](https://stackoverflow.com/questions/55726886/react-hook-send-data-from-child-to-parent-component)
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
これを読む限り、「子コンポーネントはステートを保持したままとなります」だそうです。
|
|
12
12
|
|
|
13
|
-
## 原因２：setInterval直下でインラインメソッドを実行する必要がある。
|
|
13
|
+
## 原因２：setInterval直下のsetTimerIndex内でインラインメソッドを実行する必要がある。
|
|
14
14
|
setInterval直下で setTimerIndexを実行すれば、希望通りの動きを実現できます。
|
|
15
15
|
|
|
16
16
|
[[React] setInterval()の中でsetState()を使う](https://eight-bites.blog/2021/05/setinterval-setstate/)
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
以下のコードはネタバレとなるので、見たい場合のみご参照ください。
|
|
22
22
|
|
|
23
23
|
```AppTest.tsx
|
|
24
|
-
import { useState, useRef,useEffect } from "react";
|
|
24
|
+
import { useState, useRef,useEffect,useMemo } from "react";
|
|
25
25
|
|
|
26
26
|
//子コンポーネント
|
|
27
27
|
function Timer(props) {
|
|
@@ -56,9 +56,12 @@
|
|
|
56
56
|
const [seconds, setSeconds] = useState(null);
|
|
57
57
|
const [isActive, setIsActive] = useState(false);
|
|
58
58
|
const countRef = useRef(null);
|
|
59
|
+
const initialTimer = useMemo(()=>{
|
|
60
|
+
return timerInfo[timerIndex]
|
|
61
|
+
},[tiimerInfo,timerIndex])
|
|
59
62
|
useEffect(()=>{
|
|
60
|
-
setSeconds(
|
|
63
|
+
setSeconds(initialTimer)
|
|
61
|
-
},[timer
|
|
64
|
+
},[initialTimer])
|
|
62
65
|
const startTimer = () => {
|
|
63
66
|
setIsActive(true);
|
|
64
67
|
countRef.current = setInterval(() => {
|
8
順番入替え
test
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
1
|
2つ原因があったようです。
|
|
2
2
|
|
|
3
|
-
１
|
|
3
|
+
## 原因１：子コンポーネントでフックを制御しても、ステートは更新されない。
|
|
4
|
-
|
|
5
|
-
[[React] setInterval()の中でsetState()を使う](https://eight-bites.blog/2021/05/setinterval-setstate/)
|
|
6
|
-
|
|
7
|
-
ここの実例を見ると、あくまで同一setIntervalの間で制御していますが、このシステムの場合一旦、returnで返しているために、毎回useStateで制御されたtimerIndexが初期値に戻ってしまうようです。
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
useStateフックを子コンポーネントで制御させているのも気になった（動くかどうか検証した結果、動きませんでした）ので、親コンポーネントにフックとメソッドを移動させたところ、希望通りの動作となりました。
|
|
10
5
|
|
|
11
6
|
このように答えている人もいるようです。
|
|
12
7
|
[React Hook : Send data from child to parent component](https://stackoverflow.com/questions/55726886/react-hook-send-data-from-child-to-parent-component)
|
|
@@ -15,6 +10,14 @@
|
|
|
15
10
|
|
|
16
11
|
これを読む限り、「子コンポーネントはステートを保持したままとなります」だそうです。
|
|
17
12
|
|
|
13
|
+
## 原因２：setInterval直下でインラインメソッドを実行する必要がある。
|
|
14
|
+
setInterval直下で setTimerIndexを実行すれば、希望通りの動きを実現できます。
|
|
15
|
+
|
|
16
|
+
[[React] setInterval()の中でsetState()を使う](https://eight-bites.blog/2021/05/setinterval-setstate/)
|
|
17
|
+
|
|
18
|
+
ここの実例を見ると、あくまで同一setIntervalの間で制御していますが、このシステムの場合一旦、returnで返しているために、毎回useStateで制御されたtimerIndexが初期値に戻ってしまうようです。
|
|
19
|
+
|
|
20
|
+
## 書き換えてみた
|
|
18
21
|
以下のコードはネタバレとなるので、見たい場合のみご参照ください。
|
|
19
22
|
|
|
20
23
|
```AppTest.tsx
|
7
ネタバレなので
test
CHANGED
|
@@ -14,6 +14,8 @@
|
|
|
14
14
|
**You can create a method in your parent component, pass it to child component and call it from props every time child's state changes, keeping the state in child component.**
|
|
15
15
|
|
|
16
16
|
これを読む限り、「子コンポーネントはステートを保持したままとなります」だそうです。
|
|
17
|
+
|
|
18
|
+
以下のコードはネタバレとなるので、見たい場合のみご参照ください。
|
|
17
19
|
|
|
18
20
|
```AppTest.tsx
|
|
19
21
|
import { useState, useRef,useEffect } from "react";
|
6
setInterval直下
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
2つ原因があったようです。
|
|
2
2
|
|
|
3
|
-
１つめ、setInterval直下で
|
|
3
|
+
１つめ、setInterval直下で setTimerIndexを実行すれば、希望通りの動きを実現できます。
|
|
4
4
|
|
|
5
5
|
[[React] setInterval()の中でsetState()を使う](https://eight-bites.blog/2021/05/setinterval-setstate/)
|
|
6
6
|
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
} else {
|
|
66
66
|
updateTimer();
|
|
67
67
|
console.log("Before:"+timerIndex)
|
|
68
|
-
setTimerIndex(prevIndex => prevIndex + 1)
|
|
68
|
+
setTimerIndex(prevIndex => prevIndex + 1) //setInterval直下に移動する
|
|
69
69
|
console.log("After:"+timerIndex)
|
|
70
70
|
return timerInfo[timerIndex];
|
|
71
71
|
}
|
5
リンク先の修正
test
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
２つ目、useStateフックを子コンポーネントで制御させているのも気になった（動くかどうか検証した結果、動きませんでした）ので、親コンポーネントにフックとメソッドを移動させたところ、希望通りの動作となりました。
|
|
10
10
|
|
|
11
11
|
このように答えている人もいるようです。
|
|
12
|
-
[
|
|
12
|
+
[React Hook : Send data from child to parent component](https://stackoverflow.com/questions/55726886/react-hook-send-data-from-child-to-parent-component)
|
|
13
13
|
|
|
14
14
|
**You can create a method in your parent component, pass it to child component and call it from props every time child's state changes, keeping the state in child component.**
|
|
15
15
|
|
4
子コンポーネント
test
CHANGED
|
@@ -7,6 +7,13 @@
|
|
|
7
7
|
ここの実例を見ると、あくまで同一setIntervalの間で制御していますが、このシステムの場合一旦、returnで返しているために、毎回useStateで制御されたtimerIndexが初期値に戻ってしまうようです。
|
|
8
8
|
|
|
9
9
|
２つ目、useStateフックを子コンポーネントで制御させているのも気になった（動くかどうか検証した結果、動きませんでした）ので、親コンポーネントにフックとメソッドを移動させたところ、希望通りの動作となりました。
|
|
10
|
+
|
|
11
|
+
このように答えている人もいるようです。
|
|
12
|
+
[https://stackoverflow.com/questions/55726886/react-hook-send-data-from-child-to-parent-component](https://stackoverflow.com/questions/55726886/react-hook-send-data-from-child-to-parent-component)
|
|
13
|
+
|
|
14
|
+
**You can create a method in your parent component, pass it to child component and call it from props every time child's state changes, keeping the state in child component.**
|
|
15
|
+
|
|
16
|
+
これを読む限り、「子コンポーネントはステートを保持したままとなります」だそうです。
|
|
10
17
|
|
|
11
18
|
```AppTest.tsx
|
|
12
19
|
import { useState, useRef,useEffect } from "react";
|
3
イベント関係ないようだ
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
ここの実例を見ると、あくまで同一setIntervalの間で制御していますが、このシステムの場合一旦、returnで返しているために、毎回useStateで制御されたtimerIndexが初期値に戻ってしまうようです。
|
|
8
8
|
|
|
9
|
-
２つ目、useStateフックを子コンポーネントで制御させているのも気になった（動くかどうか検証した結果、動きませんでした）ので、親コンポーネントにフックを移動させたところ、希望通りの動作となりました。
|
|
9
|
+
２つ目、useStateフックを子コンポーネントで制御させているのも気になった（動くかどうか検証した結果、動きませんでした）ので、親コンポーネントにフックとメソッドを移動させたところ、希望通りの動作となりました。
|
|
10
10
|
|
|
11
11
|
```AppTest.tsx
|
|
12
12
|
import { useState, useRef,useEffect } from "react";
|
2
親子コンポーネント
test
CHANGED
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
|
|
7
7
|
ここの実例を見ると、あくまで同一setIntervalの間で制御していますが、このシステムの場合一旦、returnで返しているために、毎回useStateで制御されたtimerIndexが初期値に戻ってしまうようです。
|
|
8
8
|
|
|
9
|
-
２つ目、useStateフックを子コンポーネントで制御させているのも気になった（動くかどうか検証した結果、動きませんでした）ので、親コンポーネントにフックを移動させたところ、希望通りの動作となりました。
|
|
9
|
+
２つ目、useStateフックを子コンポーネントで制御させているのも気になった（動くかどうか検証した結果、動きませんでした）ので、親コンポーネントにフックを移動させたところ、希望通りの動作となりました。おそらく、子コンポーネントで制御された値が親コンポーネントに伝播されていなかった可能性があります。
|
|
10
10
|
|
|
11
11
|
```AppTest.tsx
|
|
12
12
|
import { useState, useRef,useEffect } from "react";
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
//子コンポーネント
|
|
15
15
|
function Timer(props) {
|
|
16
16
|
const {seconds,isActive,startTimer,stopTimer,resetTimer} = props
|
|
17
17
|
return (
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
+
//親コンポーネントでないとフックはうまく起動しない
|
|
40
41
|
function App() {
|
|
41
42
|
const timerInfo = [3, 5, 10];
|
|
42
43
|
const [timerIndex, setTimerIndex] = useState(0);
|
|
@@ -55,7 +56,7 @@
|
|
|
55
56
|
resetTimer();
|
|
56
57
|
return 0;
|
|
57
58
|
} else {
|
|
58
|
-
updateTimer(
|
|
59
|
+
updateTimer();
|
|
59
60
|
console.log("Before:"+timerIndex)
|
|
60
61
|
setTimerIndex(prevIndex => prevIndex + 1);
|
|
61
62
|
console.log("After:"+timerIndex)
|
|
@@ -73,7 +74,7 @@
|
|
|
73
74
|
setIsActive(false);
|
|
74
75
|
};
|
|
75
76
|
|
|
76
|
-
const updateTimer = (
|
|
77
|
+
const updateTimer = () => {
|
|
77
78
|
clearInterval(countRef.current);
|
|
78
79
|
startTimer();
|
|
79
80
|
};
|
1
コンポーネントの記述と
test
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
2つ原因があったようです。
|
|
2
|
+
|
|
1
|
-
setInterval直下でuseStateを実行すれば、希望通りの動きを実現できます。
|
|
3
|
+
１つめ、setInterval直下でuseStateを実行すれば、希望通りの動きを実現できます。
|
|
2
4
|
|
|
3
5
|
[[React] setInterval()の中でsetState()を使う](https://eight-bites.blog/2021/05/setinterval-setstate/)
|
|
4
6
|
|
|
5
7
|
ここの実例を見ると、あくまで同一setIntervalの間で制御していますが、このシステムの場合一旦、returnで返しているために、毎回useStateで制御されたtimerIndexが初期値に戻ってしまうようです。
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
２つ目、useStateフックを子コンポーネントで制御させているのも気になった（動くかどうか検証した結果、動きませんでした）ので、親コンポーネントにフックを移動させたところ、希望通りの動作となりました。
|
|
8
10
|
|
|
9
11
|
```AppTest.tsx
|
|
10
12
|
import { useState, useRef,useEffect } from "react";
|