reactjs 在服务器组件中使用状态-Next 13

xu3bshqb 于 2023-03-29 发布在 React

关注(0)|答案(1)|浏览(137)

我正在构建一个简单的Next 13彩票应用程序，以了解有关新的应用程序路由器的更多信息。我希望基于动态变化的状态获取服务器组件上的数据，但我不确定如何实现这一点。
LottosPage是一个服务器组件，它显示了一个交互式LottoCard客户端组件的网格。在新的Next 13服务器组件之后，它被实现为一个异步函数，用于获取服务器上的数据：
应用程序/乐透/页面.tsx：

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

  // process and map games to LottoCards 
}

当用户与LottoCard的（例如购买机票），我刷新路线（使用router.refresh（））提示LottosPage重新获取数据，从而导致所示游戏的更新。问题是我希望它根据所选的chainId获取不同的数据。chainId是在layout.tsx文件的下拉列表中动态选择的，我使用上下文提供程序将其传递到组件树中，这使得所有的子组件都可以使用useContext（）钩子访问它的动态值。问题是我不能在服务器组件中使用react钩子。所以我不确定如何访问LottosPage中的chainId。
总结一下我想让它根据所选的chainId获取不同的数据（如上面的代码片段所示）。我希望LottosPage在所选chainId更改时重新获取新数据。是否有任何方法可以在保持LottosPage为服务器组件的情况下实现这一点？我的直觉告诉我这是可能的，因为实际组件本身没有动态或交互元素。这是我的第一个Next应用程序，我对网络开发很陌生，所以我愿意接受任何建议，我可能会想错了。

reactjs

来源：https://stackoverflow.com/questions/75839736/using-state-in-server-components-next13

1条答案

按热度按时间

lfapxunr1#

服务器组件不是交互式的，但是您可以通过LottosPage上的searchParams prop和下拉组件上的useSearchParams hook & 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将在请求时选择页面进行动态呈现。

赞(0）回复(0）举报 2023-03-29

我来回答

reactjs 在服务器组件中使用状态-Next 13

1条答案

相关问题

热门标签

最新问答