如何映射我的字典（一个元素）答案

【问题标题】：How can I map my dictionary (one element)如何映射我的字典（一个元素）
【发布时间】：2022-06-11 21:23:45
【问题描述】：

我正在研究 reactJS，我尝试显示字典中的信息，但它不起作用。

我已经用“for”做了一个循环，但我无法显示它，所以我尝试做一个地图功能。

这是我的代码：

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 : ''
    },
]);

const test = () => {
    for (var index = 0; index < Mails.length; index++) {
        console.log(Mails[index]["from"])
      //   return(
      //       <h1>Mails[index]["from"] </h1>
      //   )
    }
    return (
     <h1>a</h1>
    );
};

export const Messagerie = () => {

    const obj = [{
        foo: 'bar',
        baz: 42
      }]
    
       const list_mails = () => {   
        for (var index = 0; index < Mails.length; index++) {
            console.log(Mails[index]["from"])
          //   return(
          //       <h1>Mails[index]["from"] </h1>
          //   )
        }
    };

    return (
        <Layout title="Messagerie" loggedIn={true} accountType={parentCookies.name}>
            <Seo title="Messagerie" />

            <div>
                {list_mails()}
            </div>
        </Layout>
    );
};

我想在地图函数中显示ludo，然后是luda。

我已经尝试在 return 中执行我的 for 循环功能，但这似乎是不可能的。

我试着按照这个例子：

How to map a dictionary in reactJS?

但它会打印所有元素。我只想显示（或获取）来自

（我的测试函数中的 console.log 打印了正确的元素，但我无法返回它们）。

感谢您的回答

【问题讨论】：

你不能在 react 中使用 for 循环。循环具有 void 返回类型。它希望您返回地图，即YourObject.map((it) => ...);

标签： javascript reactjs

【解决方案1】：

你要做的是把map函数放在return中

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 = () => {

    const obj = [{
        foo: 'bar',
        baz: 42
      }]
        
    return (
        <Layout title="Messagerie" loggedIn={true} accountType={parentCookies.name}>
            <Seo title="Messagerie" />

            <div>
                {Mails.map((Mail, index) => {
                    return <h1 key={index}>{Mail.from}</h1>
                 })}
            </div>
        </Layout>
    );
};

【讨论】：

【解决方案2】：

只需映射数组并为每个项目选择from 键。

Codesandbox

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: ""
  }
]);

const test = () => {
  return Mails.map((mail, i) => <div key={i}>{mail.from}</div>);
}

【讨论】：