teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

コード修正

2021/10/22 09:42

投稿

fj68
fj68

スコア752

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
- <p>{props.name}</p> // 単純にprops.nameを使う
28
+ <p>{props.name}</p> // 単純にprops.nameを使う
29
- )
29
+ )
30
30
  ```
31
31
 
32
32
  個人的には子コンポーネント内でStateを持つと同じ値を2つのコンポーネントで同時に状態管理するといういびつな形になってしまうので、状態管理は親コンポーネントに任せて子コンポーネントは値を使うだけの2つ目の方法がおすすめです。

1

説明を追記

2021/10/22 09:42

投稿

fj68
fj68

スコア752

answer CHANGED
@@ -1,5 +1,5 @@
1
1
  子コンポーネントの`useEffect`の実行は子コンポーネントが初期化された時点で起こります。
2
- するとまだ親コンポーネント内での`fetcher()`が終わっておらず、`props.name`子コンポーネントの`name`にセットされ、その後`props.name`が変更されても`useEffect(..., [])`なので実行されず子コンポーネントの`name`が初期値のままになっているのだと思います。
2
+ するとまだ親コンポーネント内での`fetcher()`が終わっていないため初期値の`"takeshi"`が`props.name`に渡されて子コンポーネントの`name`にセットされ、その後`props.name`が変更されても`useEffect(..., [])`なので実行されず子コンポーネントの`name`が初期値のままになっているのだと思います。
3
3
 
4
4
  解決策としては`useEffect()`の第2引数に`props.name`を追記するか……
5
5