时间戳

首页 > 解决方案 > ReactJs如何呈现关联数组的对值

javascript - ReactJs如何呈现关联数组的对值

问题描述

如何渲染关联数组的对值？我有关联数组：

let data = ["foo": 3, "bar": 5, "baz": 6];

我需要在我的组件中渲染它。我尝试这样的事情：

let content = data.map((value, index) => {
  return (
    <div key={index}}>
      {index}: {value}
    </div>
  );
});

但它不起作用。

标签： javascriptarraysreactjs

解决方案

如果您有一个对象，并且想要迭代对象的键和值，请使用Object.entries()获取键/值对数组。使用 迭代对数组，并使用解构赋值Array.map()获得键 ( k) 和值 ( ) ：v

const data = { foo: 3, bar: 5, baz: 6 };

const Example = ({ data }) =>
  Object.entries(data).map(([k, v]) => (
    <div key={k}>
      {k}: {v}
    </div>
  ));

ReactDOM.render(
  <Example data={data} />,
  demo
);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></div>

推荐阅读