时间戳

首页 > 解决方案 > 下一篇 JS 如何将状态传递给 getStaticProps

javascript - 下一篇 JS 如何将状态传递给 getStaticProps

问题描述

我正在使用 getStaticProps 从 IGDB 数据库中获取游戏。一切正常，但现在我想使用文本输入和按钮来实现搜索游戏。我正在使用 onChange 从文本输入中获取价值，我需要将状态传递给搜索查询，但我如何在函数之外执行此操作？这是代码：

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...' />
  )
}

标签： javascriptreactjsapinext.js

解决方案

getStaticProps仅在构建时运行。您可以使用这种方法获取初始数据，但由于您的搜索参数是在客户端生成的，因此您还需要在客户端上获取数据。您可以使用fetchapi 或 axios 之类的库

推荐阅读