FastUI中如何让modal_view接收delivery_choice的id参数？

问题场景 #

在使用FastUI的PageEvent时，希望在modal_view函数中接收来自deliveriy_choice函数内表格id字段的参数。尝试通过PageEvent的context传递id，但context={'id': '{id}'}的写法无法成功传递参数。

相关代码 #

@router.get('/add/delivery', response_model=FastUI, response_model_exclude_none=True)
async def deliveriy_choice(
        session: AsyncSession = Depends(get_async_session)
):
    filters = DeliveryFilter()
    deliveries = await Delivery.get_by(session, filters)
    return page(
        c.Heading(text='Добавить', level=2),
        c.Paragraph(text='В базу'),
        c.Table(
            data_model=DeliveryTable,
            data=deliveries,
            columns=[
                DisplayLookup(
                    field='id', on_click=PageEvent(
                        name='server-load',
                        context={'id': '{id}'}
                    )
                ),
                DisplayLookup(field='create_at', mode='date'),
                DisplayLookup(field='shop', mode='auto')
            ]
        ),
        c.Div(
            components=[
                c.ServerLoad(
                    path='/mission/delivery/dynamic-content/{id}',
                    load_trigger=PageEvent(name='server-load'),
                    components=[c.Text(text='before')],
                ), ],
            class_name='py-2',
        )
    )


@router.get('/delivery/dynamic-content/{id}', response_model=FastUI, response_model_exclude_none=True)
async def modal_view(
        session: AsyncSession = Depends(get_async_session),
        id: str | None = None
) -> list[AnyComponent]:
    print(id)
    # delivery = await Delivery.get_by(session, filters=DeliveryFilter(id=id))
    await asyncio.sleep(0.5)
    return [
        c.Paragraph(text=f'Good'),
            ]

问题原因与修复方案 #

问题出在两个地方： #

1. PageEvent的context写法错误：你用了{'id': '{id}'}，这里的{id}是字符串字面量，FastUI不会解析它。要动态获取当前行的id字段值，直接写字段名即可，不需要加大括号和引号包裹。
2. ServerLoad的路径与路由不匹配：你的modal_view路由是/delivery/dynamic-content/{id}，但ServerLoad里写的是/mission/delivery/dynamic-content/{id}，多了/mission前缀，导致请求找不到对应的路由。

修改后的代码片段 #

1. 修正PageEvent的context：

DisplayLookup(
    field='id', on_click=PageEvent(
        name='server-load',
        context={'id': 'id'}  # 直接写字段名，动态获取当前行id
    )
),

2. 修正ServerLoad的路径，与路由保持一致：

c.ServerLoad(
    path='/delivery/dynamic-content/{id}',  # 去掉多余的/mission前缀
    load_trigger=PageEvent(name='server-load'),
    components=[c.Text(text='before')],
),

3. （可选优化）如果你的id是整数类型，把modal_view的id参数类型改为int | None = None，避免类型不匹配问题。

修改完成后，点击表格的id字段时，PageEvent会自动将当前行的id值传入context，ServerLoad会替换路径中的{id}为实际值，路由就能正确接收参数，modal_view里的print语句也能输出对应的id了。

内容的提问来源于stack exchange，提问作者ITWeirdRunner