如何在 NextJS 的 getServerSideProps 中获取 useState 值答案

【问题标题】：How to get useState values inside getServerSideProps in NextJS如何在 NextJS 的 getServerSideProps 中获取 useState 值
【发布时间】：2021-05-09 15:05:59
【问题描述】：

我有两个函数，一个函数从用户那里获取输入，另一个函数搜索提供的输入数据。我想在getServerSideProps 函数中使用useState 中的searchQuery。有没有办法做到这一点？

function SearchDemo() {
    const [searchQuery, setSearchQuery] = useState('')
  
    const ChangeHandler = event => {
      setSearchQuery(event.target.value)
    }
  
    const ButtonHandler = event => {
      event.preventDefault()
      console.log(`Data: ${searchQuery}`)
    }
  
    return (
      <div>
        <form onSubmit={ButtonHandler}>
          <div>
            <label>Search:</label>
            <input type="text" name="search" value={searchQuery} onChange={ChangeHandler}/>
            <button>Search</button>
          </div>
        </form>
      </div>
    );
}

export async function getServerSideProps({query: {page}, searchQuery}){
    console.log(searchQuery)
    return {
        props: {
            data: data
        }
    }
}

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

您需要推送 url 并重新加载页面，因为它是服务器端渲染的。

const router = useRouter()
const ButtonHandler = event => {
  event.preventDefault()
  router.push(`/thecurrentUrl?search=${searchQuery}`
  // if doesn't work then use window.location.href
  console.log(`Data: ${searchQuery}`)
}

export async function getServerSideProps({query: {page}, searchQuery}){
    console.log(query.search)
    return {
        props: {
            data: data
        }
    }
}

【讨论】：

是的。我也对此进行了搜索，仅找到了此解决方案。我们必须使用 router.push 推送相同的 URL 以再次调用 getServerSideProps。
实际上在页面已经加载的时候不需要调用getServerSideProps，你总是可以在你的组件中使用正常的fetch。因此，如果您知道我的意思，您既允许服务器端生成的搜索结果，也允许正常的获取结果。