回答編集履歴

1

Next.jsなことを忘れておかしなこと書いてたので消しました

2021/06/27 09:05

投稿

ka2obushi
ka2obushi

スコア173

test CHANGED
@@ -5,6 +5,28 @@
5
5
 
6
6
 
7
7
  ```jsx
8
+
9
+ export async function getStaticProps() {
10
+
11
+ const response = await fetch(
12
+
13
+ 'https://restcountries.eu/rest/v2/all' )
14
+
15
+ const postList = await response.json()
16
+
17
+ return{
18
+
19
+ props: {
20
+
21
+ initPostList: postList
22
+
23
+ }
24
+
25
+ }
26
+
27
+ }
28
+
29
+
8
30
 
9
31
  export async function search(name) {
10
32
 
@@ -51,71 +73,3 @@
51
73
  }
52
74
 
53
75
  ```
54
-
55
-
56
-
57
- もし`Home`よりも上位のコンポーネントでpostListを保存している場合は、`Home`にsetStateを渡す必要があります。
58
-
59
- が、`Home`以外で`postList`のデータを使っていない場合、流れがわかりづらくなるため上位のコンポーネントでstateを持たず`Home`で結果を保存することをおすすめします。
60
-
61
-
62
-
63
- ```jsx
64
-
65
- // Home.jsx
66
-
67
-
68
-
69
- export default function Home({ postList, setPostList }) {
70
-
71
- const [name, setName] = useState('');
72
-
73
- const handleName = (event) => {
74
-
75
- setName(event.target.value)
76
-
77
- search(event.target.value).then(setPostList)
78
-
79
- }
80
-
81
-
82
-
83
- return (
84
-
85
- <Layout>
86
-
87
- ...
88
-
89
- <div className={styles.country_container}>
90
-
91
- {postList.map(...)}
92
-
93
- </div>
94
-
95
- </Layout>
96
-
97
- )
98
-
99
- }
100
-
101
-
102
-
103
-
104
-
105
- // SomeComponent.jsx
106
-
107
-
108
-
109
- export default function SomeComponent() {
110
-
111
- const [postList, setPostList] = useState([]);
112
-
113
- return (
114
-
115
- <Home postList={postList} setPostList={setPostList} />
116
-
117
- )
118
-
119
- }
120
-
121
- ```