我有带有默认查询参数“？status=default”页面
我正在尝试获取值状态dan动态更改它与按钮触发器
当页面第一次加载时，它确实获得了正确的值，即“默认值”

但当我用onClick按钮更改状态时，URL的行为与我想要的一样，但值没有更改

以下是我代码片段

import React, { useEffect } from 'react'
import { GetServerSidePropsContext } from 'next'
import { useRouter } from 'next/router'

const TestURL = (props: any) => {
  const router = useRouter()
  const { query } = router

  function handleChangeQueryParams(status: string) {
    router.replace(router.asPath, { query: { status } })
  }

  console.count('rerender')
  console.log(query.status)

  return (
    <div className="flex flex-col gap-4">
      Index
      <button>{query.status}</button>
      <button
        onClick={() => handleChangeQueryParams('Test1')}
        className="border"
      >
        change query params
      </button>
      <button
        onClick={() => handleChangeQueryParams('Test2')}
        className="border"
      >
        change query params2
      </button>
    </div>
  )
}

我一直在尝试使用useEffect和useState，但似乎效果不佳，我在这里错过了什么

const [status, setStatus] = useState(query.status)
  useEffect(() => {
    setStatus(query.status)
  }, [query.status])