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

回答編集履歴

2

根本的解釈の修正

2021/10/20 00:41

投稿

FKM
FKM

スコア3662

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

1

根本的勘違い

2021/10/20 00:41

投稿

FKM
FKM

スコア3662

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