我正在研究 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 回圈功能，但這似乎是不可能的。
我試圖按照這個例子：
如何在 reactJS 中映射字典？
但它會列印所有元素。我只想顯示（或獲取）來自
（我的測驗函式中的 console.log 列印了正確的元素，但我無法回傳它們）。
謝謝你的回答
uj5u.com熱心網友回復：
你想要做的是將map函式放在回傳中
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>
);
};
uj5u.com熱心網友回復：
只需映射陣列并from為每個專案選擇鍵。
代碼沙盒
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>);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486578.html
標籤：javascript 反应