简体   繁体   English

Next JS如何将state传给getStaticProps

[英]Next JS How to pass state to getStaticProps

I am fetching games from IGDB database using getStaticProps.我正在使用 getStaticProps 从 IGDB 数据库中获取游戏。 Everything works fine but now I want to implement searching games using text input and button.一切正常,但现在我想使用文本输入和按钮来实现搜索游戏。 I am getting value from text input using onChange and I need to pass the state to the search query, but how I can do this outside the function?我正在使用 onChange 从文本输入中获取价值,我需要将 state 传递给搜索查询,但我如何在 function 之外执行此操作? Here is the code:这是代码:

export async function getStaticProps() {
    const response = await fetch(
        `https://api.igdb.com/v4/games/?fields=cover.*,name;search=${HERE I NEED TO PASS INPUT VALUE};`,
          {
            headers: {
                'Accept': 'application/json',
                'Client-ID': 'my client_id',
                'Authorization': 'Bearer my_authorization',
            }
        })
    const data = await response.json()
    return {
        props: {
            apiGames: data
        }
    }
}

const Library = ({ apiGames }) => {

  const [inputValue, setInputValue] = useState('')

  return (
    <input type="text" onChange={(e) => setInputValue(e.target.value)} placeholder='Start searching game...' />
  )
}

getStaticProps only runs at build time. getStaticProps仅在构建时运行。 You can fetch your initial data using this approach, but since your search params are generated on the client side, you will need to fetch your data on the client also.您可以使用这种方法获取初始数据,但由于您的搜索参数是在客户端生成的,因此您还需要在客户端获取数据。 You can use the fetch api, or a library like axios您可以使用fetch api 或类似 axios 的库

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM