React中如何使用map遍历字典仅渲染指定from字段内容

安全阿岳

2026-8-31

问题原因

你的代码无法正常渲染有三个核心问题：

自定义的list_mails函数仅通过for循环执行了控制台打印操作，没有返回任何可被React渲染的JSX内容，调用后返回值为undefined，页面自然无法展示对应内容
如果在for循环内部写return逻辑，第一次循环触发时就会直接终止整个函数，仅能返回第一条数据，无法实现全量列表渲染
JSX的插值大括号仅支持接收表达式，for属于流程控制语句，本身不会返回遍历生成的JSX集合，这也是你直接把for循环写在return语句中不生效的原因

修复方案

直接使用数组的map方法遍历Mails数组，遍历过程中仅提取每项的from字段返回对应JSX节点即可。注意渲染列表项时需要给每个节点配置唯一的key属性，帮助React做虚拟DOM对比更新。

修正后的核心代码如下：

const Mails = Object.freeze([
    {
        from: "Ludo",
        to: "Guillaume",
        when: "12:05:2022",
        Subject: "Absence",
        Message: "ptit tube",
        Vu : ''
    },
    {
        from: "Luda",
        to: "Guillaume",
        when: "12:05:2022",
        Subject: "Absence",
        Message: "ptit tube",
        Vu : ''
    },
]);

export const Messagerie = () => {
    return (
        <Layout title="Messagerie" loggedIn={true} accountType={parentCookies.name}>
            <Seo title="Messagerie" />
            <div>
                {Mails.map((mail, index) => (
                    <h1 key={`${mail.from}-${index}`}>{mail.from}</h1>
                ))}
            </div>
        </Layout>
    );
};