Question

在浏览器控制台中，我得到了该对象。但是当我尝试返回文本时，链接，标题都没有返回。我在控制台中获取了对象，但是当我尝试添加.text或.link时，页面显示为空白。控制台显示没有错误。

const navigation = {
  pageInfo: [
  {title: "A title"},
  {text: "item 1", link: "https://google.com"},
  {text: " item 2", link: "https://googleconquestio.com"}
  ],
  pageInfo2: [
  {title: "A title"},
  {text: "item 1", link: "https://google.com"},
  {text: "item 2", link: "https://googleconquestio.com"}
  ],
  pageInfo3: [
  {title: "Applications"},
  {text: "application item 1", link: "https://google.com"},
  {text: "application item 2", link: "https://googleconquestio.com"}
  ]
}

JSON

{{1}}

Answer 1

有几件事正在发生。首先，您不会返回映射返回的新创建的数组。其次，您还需要遍历导航对象中的每个键，因为它们是数组。您正试图从对象[property] [i]中获取{title，text}，但由于title位于索引0且text位于索引1，因此无法工作。我建议您重新构建数据。< / p>

你可以这样做：

const navigation = [
    {
        title: 'Title 1',
        text: [
            { 
                name: 'item 1',
            },
            {
                name: 'item 2',
            }
        ],
    },
    {
        title: 'Title 2',
        text: [
            { 
                name: 'item 1',
            },
            {
                name: 'item 2',
            }
        ],
    }
];

return navigation.map(obj => {

    let listElements = obj.text.map((li, c) => {
        return (
            <li key={c}>{li.name}</li>
        );
    });
    return (
        <ul>
            {obj.title}
            {listElements}
        </ul>
    );
});

Answer 2

如果以这种方式使用大括号，则需要在箭头函数中返回：这是一个示例JSBin：https://jsbin.com/mijuh/2/edit?js,console

  getLinks = (object) => {
   return Object.keys(object).map((property, i) => {
      const { text, title } = object[property][i];
      console.log(object[property][i])
      return  (
        <ul>{title}
        <li>{text}</li>
        </ul>
      )
    });

没有错误无法从地图功能返回数据？

2 个答案: