从remix中获取数据

发布于 2025-02-06 09:11:13 字数 311 浏览 4 评论 0原文

我正在探索 remix.run 并制作示例应用程序。我遇到了一个困扰我一段时间的问题。如果我错了，请纠正我：action（）用于处理表单提交，而loader（）最初用于获取数据。对于我的应用程序，我使用Mongoose在query.server.ts文件中连接mongodb，定义的模型和定义的查询功能。我想通过query.server.ts文件中定义的函数从数据库中获取数据，然后单击UI上的图像。不使用表格，我该怎么做？我无法在不知道用户点击哪些图像的情况下预取数据。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初心未许 2025-02-13 09:11:13

您可以创建一个资源路线。这些就像常规路线，但不要导出默认组件（否UI）。

您可以使用usefetcher挂钩并调用fetcher.load（）来调用您的资源路由。数据在fetcher.data中。

// routes/query-data.ts
export const loader: LoaderFunction = async ({request}) => {
  const url = new URL(request.url)
  const img = url.searchParams.get('img')
  const data = await getData(img)
  return json(data)
}

// routes/route.tsx
export default function Route() {
  const fetcher = useFetcher()

  const handleImgClick = (e) => {
    const img = e.target
    fetcher.load(`/query-data?img=${img.attr('src')}`)
  }

  return (
    <div>
      <img onClick={handleImageClick} src="/images/file.jpg" />
      <pre>{ JSON.stringify(fetcher.data, null, 2) }</pre>
    </div>
  )
}

You can create a resource route. These are like regular routes, but don't export a default component (no UI).

You can use the useFetcher hook and call fetcher.load() to call your resource route. The data is in fetcher.data.

// routes/query-data.ts
export const loader: LoaderFunction = async ({request}) => {
  const url = new URL(request.url)
  const img = url.searchParams.get('img')
  const data = await getData(img)
  return json(data)
}

// routes/route.tsx
export default function Route() {
  const fetcher = useFetcher()

  const handleImgClick = (e) => {
    const img = e.target
    fetcher.load(`/query-data?img=${img.attr('src')}`)
  }

  return (
    <div>
      <img onClick={handleImageClick} src="/images/file.jpg" />
      <pre>{ JSON.stringify(fetcher.data, null, 2) }</pre>
    </div>
  )
}

回复收藏 0 原文

~没有更多了~