Javascript Next.js 13导航路由刷新保留状态

我有一个下面的组件，它包含在获取数据并呈现数据的服务器组件中.如图所示，我在点击时呼叫router.refresh()，这样它就会重新运行该页面并重新获取数据.确实是这样，但问题是Nextjs会保持这种状态，所以当我调用setRefreshing(true)时，即使服务器组件重新运行刷新状态仍然为真.

'use client'
import { useRouter } from 'next/navigation'
import Button from './Button'

export default function Refresh() {
  const [refreshing, setRefreshing] = useState(false)
  const router = useRouter()

  const handleClick = () => {
    setRefreshing(true)
    router.refresh()
  }

  return (
    <Button onClick={handleClick}>
      <i className={`bi bi-arrow-repeat text-lg ${refreshing ? 'animate-spin' : ''}`}></i> 
      Refresh
    </Button>
  )
}

刷新后，useEffect也没有运行，因此我也不能在那里将其设置为FALSE.我已经找到了一种解决方法，可以将数组props 传递给组件，然后组件将重新运行useEffect(() => {...}, [serverHackyProp]).

<Refresh inProgress={[false]} />


const [[refreshing], setRefreshing] = useState(inProgress)
const router = useRouter()

useEffect(() => {
  setRefreshing(inProgress)
}, [inProgress])

const handleClick = () => {
  setRefreshing([true])
  router.refresh()
}

它之所以有效，是因为传递的数组总是有一个新的引用，所以useEffect将在每次服务器重新运行时运行.但我不喜欢这样做，除非这是我最后的 Select ，但在路由刷新(服务器重新获取)后，我找不到达到setRefreshing(false)的方法.