在服务器组件中使用状态 - Next13

Question

我正在构建一个简单的 Next13 彩票应用程序，以了解有关新 App Router 的更多信息。我想根据动态变化的状态获取服务器组件上的数据，但我不知道如何实现这一点。

LottosPage是一个服务器组件，显示交互式LottoCard客户端组件的网格。在新的 Next13 服务器组件之后，它被实现为一个异步函数，用于获取服务器上的数据：

应用程序/lottos/page.tsx：

export default async function LottosPage() {
  const games: Game[] = await getGames(chainId);

  // process and map games to LottoCards 
}

当用户与LottoCards 交互（例如购买门票）时，我刷新路线（使用 router.refresh()），提示 sLottosPage重新获取数据，从而更新所显示的游戏。问题是我希望它根据所选的 chainId 获取不同的数据。chainId 是在文件的下拉列表中动态选择的layout.tsx，我使用上下文提供程序将其传递到组件树中，这使所有子组件可以使用 useContext() 挂钩访问其动态值。问题是我无法在服务器组件中使用反应挂钩。所以我不知道如何访问LottosPage.

因此，总而言之，我希望它做的是根据所选的 chainId 获取不同的数据（如上面的代码片段所示）。我希望LottosPage在选定的 chainId 更改时重新获取新数据。LottosPage有没有办法在保留服务器组件的同时完成此任务？我的直觉告诉我这是可能的，因为实际组件本身没有动态或交互元素。它只需要在服务器上完全重新渲染。这是我的第一个 Next 应用程序，我对网络开发还很陌生，所以我愿意接受任何建议，我可能会以错误的方式思考这个问题。

Answer 1

服务器组件不是交互式的，但您可以通过searchParams上的 propLottosPage以及下拉组件上的useSearchParamshook &组件来实现您所需要的。Link

一个基本的例子：

下拉组件

'use client'

import Link from 'next/link'
import { useSearchParams } from 'next/navigation'

const Dropdown = () => {
  const searchParams = useSearchParams()

  const createQueryString = (key: string, value: number | string) => {
    const params = new URLSearchParams(searchParams)
    params.set(key, String(value))

    return String(params)
  }

  return (
    <div>
      <Link href={`/lottos?${createQueryString('chainId', 100)}`}>
        Lotto 100
      </Link>
      <Link href={`/lottos?${createQueryString('chainId', 200)}`}>
        Lotto 200
      </Link>
      <Link href={`/lottos?${createQueryString('chainId', 300`}>
        Lotto 300
      </Link>
    </div>
  )
}

export default Dropdown

乐透页面

interface Props {
  searchParams?: { chainId?: string }
}

const LottosPage = async ({ searchParams }: Props) => {
  const chainId = searchParams?.chainId ?? ''
  const games: Game[] = await getGames(chainId)

  // process and map games to LottoCards 
}

export default LottosPage

如文档中所述，使用searchParams将在请求时选择页面进行动态渲染。