回答編集履歴
3
ItemProps を削除
test
CHANGED
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
```tsx
|
|
18
18
|
// page.tsx か layout.tsx
|
|
19
19
|
import { ReactNode, use, useEffect, useState } from 'react';
|
|
20
|
-
import { itemProps } from '@/lib/const/equipmentType';
|
|
21
20
|
import { getEquipmentInfo } from '@/lib/apis/getEquipmentInfo';
|
|
22
21
|
|
|
23
22
|
const Page = async () => {
|
|
@@ -37,8 +36,7 @@
|
|
|
37
36
|
"use client";
|
|
38
37
|
|
|
39
38
|
import { FC, ReactNode, createContext, useContext } from "react";
|
|
40
|
-
|
|
41
|
-
t
|
|
39
|
+
import { itemProps } from '@/lib/const/equipmentType';
|
|
42
40
|
|
|
43
41
|
type ItemDataContextValue = {
|
|
44
42
|
items: ItemProps[];
|
2
コードにHogeが残っていた
test
CHANGED
|
@@ -38,14 +38,16 @@
|
|
|
38
38
|
|
|
39
39
|
import { FC, ReactNode, createContext, useContext } from "react";
|
|
40
40
|
|
|
41
|
+
type ItemProps = {};
|
|
42
|
+
|
|
41
|
-
type
|
|
43
|
+
type ItemDataContextValue = {
|
|
42
44
|
items: ItemProps[];
|
|
43
45
|
};
|
|
44
46
|
|
|
45
|
-
const ItemsDataContext = createContext<
|
|
47
|
+
const ItemsDataContext = createContext<ItemDataContextValue>({ items: [] });
|
|
46
48
|
|
|
47
49
|
export const ItemsDataProvider: FC<{
|
|
48
|
-
value:
|
|
50
|
+
value: ItemDataContextValue;
|
|
49
51
|
children: ReactNode;
|
|
50
52
|
}> = ({ value, children }) => {
|
|
51
53
|
return (
|
|
@@ -56,8 +58,8 @@
|
|
|
56
58
|
};
|
|
57
59
|
|
|
58
60
|
export const useItemsData = () => {
|
|
59
|
-
// Provider の内側じゃなかったら throw error する、みたいなコードは必要であれば追加
|
|
60
61
|
return useContext(ItemsDataContext);
|
|
61
62
|
};
|
|
62
63
|
|
|
64
|
+
|
|
63
65
|
```
|
1
コードに誤りがあったので修正
test
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
2024/02/20 追記: コードに誤りがあったので、修正しました。
|
|
2
|
+
|
|
1
3
|
Pages Router の getStaticProps / getServerSideProps に相当するのは、Server Component です。
|
|
2
4
|
|
|
3
5
|
- fetch() を呼び出すときにオプションを指定
|
|
@@ -18,13 +20,13 @@
|
|
|
18
20
|
import { itemProps } from '@/lib/const/equipmentType';
|
|
19
21
|
import { getEquipmentInfo } from '@/lib/apis/getEquipmentInfo';
|
|
20
22
|
|
|
21
|
-
const Page = () => {
|
|
23
|
+
const Page = async () => {
|
|
22
24
|
const data = await getEquipmentInfo();
|
|
23
25
|
|
|
24
26
|
return (
|
|
25
|
-
<ItemsData
|
|
27
|
+
<ItemsDataProvider value={{ itemsData }}>
|
|
26
28
|
{children}
|
|
27
|
-
</ItemsData
|
|
29
|
+
</ItemsDataProvider>
|
|
28
30
|
);
|
|
29
31
|
};
|
|
30
32
|
|
|
@@ -33,9 +35,29 @@
|
|
|
33
35
|
|
|
34
36
|
```tsx
|
|
35
37
|
"use client";
|
|
36
|
-
import { ReactNode, createContext, use, useEffect, useState } from 'react';
|
|
37
38
|
|
|
38
|
-
|
|
39
|
+
import { FC, ReactNode, createContext, useContext } from "react";
|
|
40
|
+
|
|
41
|
+
type HogeContextValue = {
|
|
39
|
-
items
|
|
42
|
+
items: ItemProps[];
|
|
40
|
-
}
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const ItemsDataContext = createContext<HogeContextValue>({ items: [] });
|
|
46
|
+
|
|
47
|
+
export const ItemsDataProvider: FC<{
|
|
48
|
+
value: HogeContextValue;
|
|
49
|
+
children: ReactNode;
|
|
50
|
+
}> = ({ value, children }) => {
|
|
51
|
+
return (
|
|
52
|
+
<ItemsDataContext.Provider value={value}>
|
|
53
|
+
{children}
|
|
54
|
+
</ItemsDataContext.Provider>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export const useItemsData = () => {
|
|
59
|
+
// Provider の内側じゃなかったら throw error する、みたいなコードは必要であれば追加
|
|
60
|
+
return useContext(ItemsDataContext);
|
|
61
|
+
};
|
|
62
|
+
|
|
41
63
|
```
|