Question

我正在使用 useRouter 从查询中的用户获取一些数据。我可以看到 HTML 形式的查询数据。但是当我在 search 中传递 getServerSideProps 时，它返回 undefined。

function SearchData() {
  const router = useRouter()
  const { search } = router.query
  return (
    <div>
      <h1>{search}</h1>
    </div>
  )
}


export async function getServerSideProps({search}) {
    console.log(search)
}

Answer 1

您不应该在 getServerSideProps 中传递搜索。

访问http://localhost/page?search=abc时，可以从query.search中检索abc

export async function getServerSideProps({query}) {

  console.log('req.query', query)

  //do something with the parameter. in this instance - query.search

  return {
    props: {}, // will be passed to the page component as props
  }
}

如果你没有使用serverSideProps，想获取搜索查询字符串，则需要使用useEffect，等待router准备好。

示例

  const [ query, setQuery ] = useState()
  const router = useRouter()
  useEffect(() => {

        if (router.isReady) {

            setQuery(router.query)
            //query.search will then contain the search param
        }

    }, [router])

Answer 2

getServerSideProps 函数接受一个 context 作为参数，而 context 有一个 query 对象，可让您访问查询字符串。

因此，与其解构 search，不如考虑解构 query 并像这样使用它

export async function getServerSideProps({ query }) {
    console.log(query.search)
}

useRouter 查询在 getServerSideProps 中返回 undefined

2 个答案: