Question

如果我有这个对象：

const json = {
  products: [
    {
      id: 0,
      name: "Chair Roby",
      style: "Leather",
      color: "red",
    }
  ]
};

我可以在其内部的数组上进行映射，并像这样在数组内部显示对象中的所有项目：

const prod = json.products.map(item => {
  return (
      <ul>
        <li>
          {item.name}
        </li>
        <li>
          {item.style}
        </li>
         <li>
          {item.color}
        </li>
      </ul>
  );
});

这列出了我的值，但是如何显示名称，样式和颜色之类的键？

Answer 1

在每个项目的Object.entries上使用另一个嵌套地图：

const json = {
  products: [
    {
      id: 0,
      name: "Chair Roby",
      style: "Leather",
      color: "red",
    },
    {
      foo: 'bar'
    }
  ]
};

class MyList extends React.Component {
  render() {
    return json.products.map((obj) => (
      <ul>
        { 
          Object.entries(obj).map(([key, val]) => (
            <li>
              {('key: ' + key +  ', val: ' + val)}
            </li>
          ))
        }
      </ul>
    ));
  }
}
ReactDOM.render(
  <MyList />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

最好的方法是：

const prod = Object.keys(json.products).forEach(productKey => { return ( <ul> <li> {productKey} - {json.products[productKey]} </li> </ul> ); });

Answer 3

尝试一下

 Object.keys(json).map(Followed by necessary code)

Answer 4

const prod = json.products.map(item =>
      <ul>
          {Object.entries(item).map((key, value) =>
             <li>{key}: {value}</li>
          }
      </ul>
);

不仅显示值，还显示键的地图

4 个答案: