回答編集履歴
2
根本的解釈の修正
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
|
-
|
|
12
|
+
|
|
5
|
-
|
|
13
|
+
JSXの記述は自分も勘違いがあったのでこっちの環境でも検証してみました。質問文で正しいですが、二重リテラルではなく
|
|
6
|
-
|
|
14
|
+
|
|
7
|
-
</AuthContext.Provider>
|
|
8
|
-
);
|
|
9
|
-
```
|
|
15
|
+
```
|
|
16
|
+
value={ //ここはjsxのルール上のオブジェクトリテラル（変数代入用）
|
|
17
|
+
{ currentUser } //ここはオブジェクトのリテラル（代入された変数）
|
|
18
|
+
}
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
いわばこのような状態になっているので。
|
1
根本的勘違い
answer
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
useContextで子要素に
|
|
1
|
+
useContextで子要素に渡すならこの記述でいいのでは？
|
|
2
2
|
|
|
3
3
|
```
|
|
4
4
|
return (
|
|
5
|
-
<AuthContext.Provider value={
|
|
5
|
+
<AuthContext.Provider value={ currentUser }>
|
|
6
|
-
<対象の子コンポーネント
|
|
6
|
+
<対象の子コンポーネント/>
|
|
7
7
|
</AuthContext.Provider>
|
|
8
8
|
);
|
|
9
9
|
```
|