如何循环这个数组？

Question

我正在尝试使用 map 方法显示此数组的值。数据应该像 "local - event - age " 一样在 JSX 中显示。性能方面的最佳实践是什么？我想避免嵌套地图。

const data = [
  {
    cambridge: {
      event: "birthday",
      age: "free"
    },
    boston: {
      event: "beer tasting",
      age: "only adults"
    },
    watertown: {
      event: "porch music festival",
      age: "free"
    }
  }
];

我试过类似的东西，但它不是 "local - event - age" 的格式。谢谢！


function App() {
  return (
    <div className="App">
      {data.map(obj => (
        <div>
          <div>{Object.keys(obj).map(key => console.log(key))}</div>
          <div>{Object.values(obj).map(key => console.log(key.event, key.age))}</div>
        </div>
      ))}
    </div>
  );
}

Answer 1

我想这就是你想要的。

function App() {
    return (
        <div className="App">
        {
            data.map(obj => {
                Object.keys(obj).map(key => {
                    return (
                        <div>
                            <div>{key}</div>
                            <div>{obj[key].event} - {obj[key].age}</div>
                        </div>
                    )
                })
            })
        }
        </div>
    );
}

Answer 2

您可以使用第一个地图中的 index 来查找正确的数组项并使用 keys 来访问值。像这样：

const childrenElements = data.map((obj, idx) => 
    Object.keys(obj).map((key) => {
      return (
        <p>
          {key} - {data[idx][key].event} - {data[idx][key].age}
        </p>
      );
    })    
  );

  return (
    <div className="App">
      <div>{childrenElements}</div>
    </div>
  );

这是一个工作示例：https://codesandbox.io/s/unruffled-hugle-1eip0

Answer 3

您可以使用 es6 模板字符串来格式化 "local - event - age "

您的代码如下所示，

    <div className="App">
      {data.map(obj => (
        <div>
          <div>{Object.values(obj).map(key => console.log(`local - ${key.event} - ${key.age}`))}</div>
        </div>
      ))}
    </div>

如何循环这个数组？

How to loop this array?

loops

nested-loops

reactjs