如何在 NextJS 的 getServerSideProps 中获取 useState 值

Question

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

 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 } } }

Answer 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
        }
    }
}