回答編集履歴

2

根本的解釈の修正

2021/10/20 00:41

投稿

FKM
FKM

スコア3640

test CHANGED
@@ -1,17 +1,41 @@
1
+ 親コンポーネントからuseContextフックで橋渡しする場合はこれでいいのでは?子コンポーネントで受け皿としてcurrentUserが橋渡しされている状態なので、二重にcurrentUserは不要じゃないかと思われます。
2
+
3
+
4
+
5
+ ```js
6
+
1
- useContextで子要素に渡すならこの記述でいいのでは?
7
+ const fetch = async () => {
8
+
9
+   const { currentUser } = useContext(AuthContext)
10
+
11
+   console.log(currentUser) //確認するとcurrentUser直下にメンバが代入されるはずです
12
+
13
+ if (dig(currentUser, "currentUser", "uid")) {
14
+
15
+ const data = await initGet(currentUser.uid);
16
+
17
+ await setUsers(data);
18
+
19
+ }
20
+
21
+ ```
22
+
23
+
24
+
25
+ JSXの記述は自分も勘違いがあったのでこっちの環境でも検証してみました。質問文で正しいですが、二重リテラルではなく
2
26
 
3
27
 
4
28
 
5
29
  ```
6
30
 
7
- return (
31
+ value={ //ここはjsxのルール上のオブジェクトリテラル(変数代入用)
8
32
 
9
- <AuthContext.Provider value={ currentUser }>
33
+ { currentUser } //ここはオブジェクトのリテラル(代入された変数)
10
34
 
11
-   <対象の子コンポーネント/>
12
-
13
- </AuthContext.Provider>
14
-
15
- );
35
+ }
16
36
 
17
37
  ```
38
+
39
+
40
+
41
+ いわばこのような状態になっているので。

1

根本的勘違い

2021/10/20 00:41

投稿

FKM
FKM

スコア3640

test CHANGED
@@ -1,4 +1,4 @@
1
- useContextで子要素にプロパティを渡す場合も、子コンポーネントにオブジェクトリテラルを埋め込む必要があります。
1
+ useContextで子要素に渡すならこの記述いいのでは?
2
2
 
3
3
 
4
4
 
@@ -6,9 +6,9 @@
6
6
 
7
7
  return (
8
8
 
9
- <AuthContext.Provider value={{ currentUser }}>
9
+ <AuthContext.Provider value={ currentUser }>
10
10
 
11
-   <対象の子コンポーネント currentUser={渡したいリテラル名} />
11
+   <対象の子コンポーネント/>
12
12
 
13
13
  </AuthContext.Provider>
14
14