Pynecone Grid+Foreach示例无法获取卡片项详情的问题咨询

问题说明 #

在Pynecone的Grid结合Foreach组件实现卡片布局时，无法从列表项中获取详细信息：

• 预期输出：每个卡片显示子列表中的名称（如item1）和对应的描述（如desc1）
• 当前输出：每个卡片直接显示整个子列表（如["item1", "desc1"]）

尝试将pc.text(item)修改为pc.text(item[0])时，触发以下错误：

TypeError: Could not index into var of type Any. (If you are trying to index into a state var, add a type annotation to the var.)

当前代码 #

import pynecone as pc

def show_items(item):
    return pc.box(
        pc.text(item),
        bg="lightgreen"
    )


class ExampleState(pc.State):
    my_objects = [["item1", "desc1"], ["item2", "desc2"]]
    print(my_objects)


def home():
    homeContainer = pc.container(
        pc.hstack(
            pc.container(
                # watch list
                pc.vstack(
                    pc.container(h="20px"),
                    pc.hstack(
                        pc.heading("Example List", size="md"),
                    ),
                    pc.grid(
                        pc.foreach(ExampleState.my_objects, show_items),
                        template_columns="repeat(5, 1fr)",
                        h="20vh",
                        width="100%",
                        gap=4,
                    ),
                    justifyContent="start",
                    align_items="start",
                ),
                height="100vh",
                maxWidth="auto",
            ),

            bg="#e8e5dc",
        ),
    )

    return homeContainer


app = pc.App(state=ExampleState)
app.add_page(home, route="/")
app.compile()

解决方案 #

错误提示明确指出需要给状态变量添加类型注解，让Pynecone识别变量结构以支持索引操作。同时调整渲染函数，实现预期的卡片布局：

修改后的完整代码 #

import pynecone as pc
from typing import List

def show_items(item):
    return pc.box(
        pc.vstack(
            pc.text(item[0], font_weight="bold"),
            pc.text(item[1], font_size="sm", color="gray"),
            spacing=1
        ),
        bg="lightgreen",
        padding=4,
        border_radius="md"
    )


class ExampleState(pc.State):
    my_objects: List[List[str]] = [["item1", "desc1"], ["item2", "desc2"]]


def home():
    homeContainer = pc.container(
        pc.hstack(
            pc.container(
                pc.vstack(
                    pc.container(h="20px"),
                    pc.heading("Example List", size="md"),
                    pc.grid(
                        pc.foreach(ExampleState.my_objects, show_items),
                        template_columns="repeat(5, 1fr)",
                        h="20vh",
                        width="100%",
                        gap=4,
                    ),
                    justifyContent="start",
                    align_items="start",
                ),
                height="100vh",
                maxWidth="auto",
            ),
            bg="#e8e5dc",
        ),
    )

    return homeContainer


app = pc.App(state=ExampleState)
app.add_page(home, route="/")
app.compile()

关键修改点 #

1. 添加类型注解：导入List类型，给my_objects标注List[List[str]]，明确这是字符串列表组成的列表，让Pynecone支持索引访问
2. 优化卡片内容：在show_items中用vstack垂直排列名称（加粗）和描述（小字灰色），提升视觉效果
3. 清理冗余代码：移除状态初始化时的print(my_objects)，避免不必要的输出

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