繁体   English   中英

无法使用地图迭代对象

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM