【Next.js】外部APIを叩きデータ取得し、上書きをしたい

Question

前提・実現したいこと

実現したい事

• 検索フォームに文字を入力する度外部APIからデータを取得し検索結果を表示（上書き）させたい

前提

• onChangeを使い入力する度に外部APIのデータを取得するまではできている

React Next.js共に初めて４日目の初心者です、拙いコードですが宜しくお願いいたします

発生している問題・エラーメッセージ

onChengeの中にAPIを取得する関数を入れて入力するたびにデータは取得できているがフロントに反映させる方法が思いつかないです。

該当のソースコード

import Layout from '../components/layout'
import styles from '../styles/Home.module.css'
import fetch from 'node-fetch'
import Image from 'next/image'
import React, {useState} from 'react'


export async function getStaticProps() {
  const response = await fetch(
    'https://restcountries.eu/rest/v2/all'  )
  const postList = await response.json()
  return{
  props: {
    postList
    }
  }
}

export async function search(event) {
  const searchRes = await fetch(
    `https://restcountries.eu/rest/v2/name/${event.target.value}`   )
  const searchList = await searchRes.json()
  console.log(postList)
  return{
    props: {
      searchList
    }
  }
}



export default function Home( {searchList, postList} ) {
  const [name, setName] = useState('');
  const  handleName = (event) => {
    setName(event.target.value)
    search(event)
    }
  return (
    <Layout>
      <div className={styles.header}>
        <div className={styles.title}>Where in the world?</div>
      </div>
      <div className='search'>
      <input type="text" value={name} onChange={(event) => handleName(event)}  placeholder="Search for a country..." className={styles.search_field}/>
      </div>
      <div className={styles.country_container}>
        {postList.map((List) => {
          return(
            <div className={styles.country_card}>
              <div className={styles.card_top}>
                <Image src={List.flag} width={264} height={160} className={styles.flag} />
              </div>
              <div className={styles.card_bottom}>
                <div className={styles.country_name}>
                  {List.name}
                </div>
                <ul className={styles.country_detail}>
                  <li><span className={styles.key}>Population:</span>{Number(List.population).toLocaleString()}</li>
                  <li><span className={styles.key}>Region:</span>{List.region}</li>
                  <li><span className={styles.key}>Capital:</span>{List.capital}</li>
                </ul>
              </div>
            </div>
          )
        })}
      </div>
    </Layout>
  )
}

Answer 1

propsは上位のコンポーネントから渡されるもので、変更できません。
新しく検索結果を保存するためのstateを作ってfetchできたらsetStateするようにします。

export async function getStaticProps() {
  const response = await fetch(
    'https://restcountries.eu/rest/v2/all'  )
  const postList = await response.json()
  return{
    props: {
      initPostList: postList
    }
  }
}

export async function search(name) {
  const searchRes = await fetch(`https://restcountries.eu/rest/v2/name/${name}`)
  return searchRes.json()
}

export default function Home({ initPostList }) {
  const [name, setName] = useState('');
  const [postList, setPostList] = useState(initPostList);
  const handleName = (event) => {
    setName(event.target.value)
    search(event.target.value).then(setPostList)
  }

  return (
    <Layout>
      ...
      <div className={styles.country_container}>
        {postList.map(...)}
      </div>
    </Layout>
  )
}

Comments

[Yutaka.engin]

ご回答、ご説明いただきありがとうございます！
自分の思った通りの挙動が確認できました！