Question

我正在尝试使用map方法显示此数组的值。数据应在JSX中显示为“本地-事件-年龄”。就性能而言，最佳实践是什么？我想避免嵌套地图。

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

我尝试了类似的方法，但是它不是“本地-事件-年龄”格式。谢谢！


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模板字符串将其格式设置为“本地-事件-年龄”

您的代码如下：

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

如何循环此数组？

3 个答案: