10、Remix 中的数据获取与变更

Remix 中的数据获取与变更

1. 参数化路由中获取动态数据

在更新了费用概览页面后，之前硬编码的费用详情路由可能会出现问题。我们需要修复这个问题，更新代码以根据路由参数从数据库中查询所需的费用信息。具体步骤如下：
1. 打开 /app/routes/dashboard.expenses.$id.tsx 文件，该文件已经使用了 loader 函数来渲染模拟数据。
2. 删除文件中的模拟数据数组。
3. 更新 loader 函数，使其根据 URL 中的 id 参数从数据库中查询唯一的费用对象：

import { db } from '~/modules/db.server';
export async function loader({ params }: LoaderFunctionArgs) {
    const { id } = params;
    const expense = await db.expense.findUnique({ where: { id } });
    if (!expense) throw new Response('Not found', { status: 404 });
    return json(expense);
}

此代码会调用数据库动态查询正确的费用信息。若未找到匹配 id 参数的费用，会抛出 404 响应。
4. 在终端执行 np