我正在探索Remix.run并制作一個示例應用程式。我遇到了一個困擾我一段時間的問題。如果我錯了，請糾正我：action()用于處理表單提交，并且loader()用于最初獲取資料。query.server.ts對于我的應用程式，我使用 mongoose 在一個檔案中連接 MongoDB、定義模型和定義查詢函式。query.server.ts當在 UI 上單擊影像時，我想通過檔案中定義的函式從資料庫中獲取資料。我怎么能不使用表格來做到這一點？我無法在不知道用戶點擊了什么影像的情況下預取資料。
uj5u.com熱心網友回復：
您可以創建資源路由。這些類似于常規路由，但不匯出默認組件（無 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 fetch = 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>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/489692.html
標籤：javascript 打字稿 mongodb 混音运行
上一篇：更新集合欄位和陣列