[英]Not able to iterate over object using map
我正在嘗試使用數據集合“帖子”來呈現表格。 我想使用map方法通過對數組的每個元素應用回調函數來返回一個新數組,而 forEach 方法不返回任何內容。 有人可以闡明如何打印以下集合嗎? 謝謝
0:
fields: {title: {…}, description: {…}}
metadata: {tags: Array(1)}
sys: {space: {…}, id: '3Nkel8Pkog5UK3r4DPFD0b', type: 'Entry', createdAt: '2022-05-16T13:43:08.257Z', updatedAt: '2022-05-18T09:21:02.302Z', …}
[[Prototype]]: Object
1: {metadata: {…}, sys: {…}, fields: {…}}
2: {metadata: {…}, sys: {…}, fields: {…}}
3: {metadata: {…}, sys: {…}, fields: {…}}
4: {metadata: {…}, sys: {…}, fields: {…}}
5: {metadata: {…}, sys: {…}, fields: {…}}
6: {metadata: {…}, sys: {…}, fields: {…}}
7: {metadata: {…}, sys: {…}, fields: {…}}
length: 8
[[Prototype]]: Array(0)
{
"title": {
"en-US": "Test Metadata "
},
"description": {
"en-US": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Reference Description",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
}
}
}
import { Table } from '@contentful/f36-components';
import { PageExtensionSDK } from '@contentful/app-sdk';
import { useCMA, useSDK } from '@contentful/react-apps-toolkit';
const Page = () => {
const sdk = useSDK<PageExtensionSDK>();
const cma = useCMA();
const [posts, setPosts] = useState([])
useEffect(()=> {
cma.entry.getMany({
query:{
content_type: 'title'
},
})
.then((data:any) => {
if (data.items.length) { setPosts(data.items) }
})
});
// posts.forEach((key, index) => {
// console.log('${key}: ${posts[key]}');
// });
return(
<Table className="postTable">
<Table.Head>
<Table.Row>
<Table.Cell>Entry Name</Table.Cell>
<Table.Cell>Last Activity</Table.Cell>
</Table.Row>
</Table.Head>
{
<Table.Body>
{posts.map((post:any) => {
return (
<Table.Row key={post['title']}>
<Table.Cell>{post['description']}</Table.Cell>
<Table.Cell>{post['description'] || "Column 2"}</Table.Cell>
</Table.Row>
);
})}
</Table.Body>
}
</Table>
)
};
export default Page;
不要將地圖內的“發布”視為數組,因為它不是。 它是一個對象。 嘗試這樣的事情:
{posts.map((post) => {
return (
<Table.Row key={post.title}>
<Table.Cell>{post.description}</Table.Cell>
<Table.Cell>{post.description || "Column 2"}</Table.Cell>
</Table.Row>
);
})}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.