回答編集履歴
1
Next.jsなことを忘れておかしなこと書いてたので消しました
answer
CHANGED
|
@@ -2,6 +2,17 @@
|
|
|
2
2
|
新しく検索結果を保存するためのstateを作ってfetchできたらsetStateするようにします。
|
|
3
3
|
|
|
4
4
|
```jsx
|
|
5
|
+
export async function getStaticProps() {
|
|
6
|
+
const response = await fetch(
|
|
7
|
+
'https://restcountries.eu/rest/v2/all' )
|
|
8
|
+
const postList = await response.json()
|
|
9
|
+
return{
|
|
10
|
+
props: {
|
|
11
|
+
initPostList: postList
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
5
16
|
export async function search(name) {
|
|
6
17
|
const searchRes = await fetch(`https://restcountries.eu/rest/v2/name/${name}`)
|
|
7
18
|
return searchRes.json()
|
|
@@ -24,38 +35,4 @@
|
|
|
24
35
|
</Layout>
|
|
25
36
|
)
|
|
26
37
|
}
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
もし`Home`よりも上位のコンポーネントでpostListを保存している場合は、`Home`にsetStateを渡す必要があります。
|
|
30
|
-
が、`Home`以外で`postList`のデータを使っていない場合、流れがわかりづらくなるため上位のコンポーネントでstateを持たず`Home`で結果を保存することをおすすめします。
|
|
31
|
-
|
|
32
|
-
```jsx
|
|
33
|
-
// Home.jsx
|
|
34
|
-
|
|
35
|
-
export default function Home({ postList, setPostList }) {
|
|
36
|
-
const [name, setName] = useState('');
|
|
37
|
-
const handleName = (event) => {
|
|
38
|
-
setName(event.target.value)
|
|
39
|
-
search(event.target.value).then(setPostList)
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
<Layout>
|
|
44
|
-
...
|
|
45
|
-
<div className={styles.country_container}>
|
|
46
|
-
{postList.map(...)}
|
|
47
|
-
</div>
|
|
48
|
-
</Layout>
|
|
49
|
-
)
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
// SomeComponent.jsx
|
|
54
|
-
|
|
55
|
-
export default function SomeComponent() {
|
|
56
|
-
const [postList, setPostList] = useState([]);
|
|
57
|
-
return (
|
|
58
|
-
<Home postList={postList} setPostList={setPostList} />
|
|
59
|
-
)
|
|
60
|
-
}
|
|
61
38
|
```
|