回答編集履歴
2
コード修正
answer
CHANGED
@@ -16,6 +16,7 @@
|
|
16
16
|
return (
|
17
17
|
<p>{name}</p> //ここではtakeshi
|
18
18
|
)
|
19
|
+
}
|
19
20
|
```
|
20
21
|
|
21
22
|
子コンポーネントで`name`というStateを用意せずに`props.name`を使うかすればよいかと。
|
@@ -23,10 +24,9 @@
|
|
23
24
|
```typescript
|
24
25
|
//Child.tsx
|
25
26
|
|
26
|
-
const Parent: React.FC = (props) =>
|
27
|
+
const Parent: React.FC = (props) => (
|
27
|
-
return (
|
28
|
-
|
28
|
+
<p>{props.name}</p> // 単純にprops.nameを使う
|
29
|
-
|
29
|
+
)
|
30
30
|
```
|
31
31
|
|
32
32
|
個人的には子コンポーネント内でStateを持つと同じ値を2つのコンポーネントで同時に状態管理するといういびつな形になってしまうので、状態管理は親コンポーネントに任せて子コンポーネントは値を使うだけの2つ目の方法がおすすめです。
|
1
説明を追記
answer
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
子コンポーネントの`useEffect`の実行は子コンポーネントが初期化された時点で起こります。
|
2
|
-
するとまだ親コンポーネント内での`fetcher()`が終わって
|
2
|
+
するとまだ親コンポーネント内での`fetcher()`が終わっていないため、初期値の`"takeshi"`が`props.name`に渡されて子コンポーネントの`name`にセットされ、その後`props.name`が変更されても`useEffect(..., [])`なので実行されず子コンポーネントの`name`が初期値のままになっているのだと思います。
|
3
3
|
|
4
4
|
解決策としては`useEffect()`の第2引数に`props.name`を追記するか……
|
5
5
|
|