在反应中映射对象数组

如何解决在反应中映射对象数组

我有一个具有以下格式的对象数组。 我如何映射这个数组，以便我可以为每个对象拥有一篇 HTML 文章，以及一个显示每个对象的数据、来源、目的地、价格和可用性的 p 标签？

[
    {
        "data": "2020-11-15","origin": "COR","destination": "MDZ","price": 474.05,"availability": 9
    },{
        "data": "2020-11-15","destination": "BRC","price": 197.68,"availability": 2
    },"origin": "EPA","price": 300.3,"availability": 1
    },{
        "data": "2020-11-20","price": 373.19,"availability": 6
    }
]

解决方法

export default function App() {
  const data = [{ "data": "2020-11-15","origin": "COR","destination": "MDZ","price": 474.05,"availability": 9 },{ "data": "2020-11-15","destination": "BRC","price": 197.68,"availability": 2 },"origin": "EPA","price": 300.3,"availability": 1 },{ "data": "2020-11-20","price": 373.19,"availability": 6 }]
  
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {data.map(item => (
        <p>Data: {item.data} - Origin: {item.origin} - Destination: {item.destination} - Price: $ {item.price} - Availability:  {item.availability}</p>
      ))}
    </div>
  );
}

,

来源：

export default function App() {
  var objects = [
    {
      data: "2020-11-15",origin: "COR",destination: "MDZ",price: 474.05,availability: 9
    },{
      data: "2020-11-15",destination: "BRC",price: 197.68,availability: 2
    },origin: "EPA",price: 300.3,availability: 1
    },{
      data: "2020-11-20",price: 373.19,availability: 6
    }
  ];
  var properties = Object.keys(objects[0]);

  return objects.map((obj) => (
    <article>
      {properties.map((property) => (
        <p>
          {property}: {obj[property]}
        </p>
      ))}
      <br />
    </article>
  ));
}

演示： https://codesandbox.io/s/quizzical-hooks-lzyhv?file=/src/App.js:24-831

结果：

,

//   You can use the built in function "map" for arrays

      var array = [{
        name:"said",age:12
}];
        array.map(row=>{
    return (
         <div>
            <p>{row.name}</p>
<p>{row.age}</p>
    </div>
    )
    });