如何使用Object Dot Keys和数组Dot Map迭代来显示组件中的数据？

import React from 'react';

// 假设数据存储在一个对象中
const data = {
  name: 'John',
  age: 25,
  email: 'john@example.com'
};

const MyComponent = () => {
  // 使用Object.keys获取对象的属性名数组
  const keys = Object.keys(data);

  return (
    <div>
      {/* 使用数组的map方法，遍历属性名数组 */}
      {keys.map(key => (
        <div key={key}>
          <span>{key}: </span>
          {/* 根据属性名从对象中获取相应的数据 */}
          <span>{data[key]}</span>
        </div>
      ))}
    </div>
  );
};

export default MyComponent;

import React from 'react';

// 假设数据存储在一个数组中
const data = [
  { name: 'John', age: 25, email: 'john@example.com' },
  { name: 'Jane', age: 30, email: 'jane@example.com' }
];

const MyComponent = () => {
  return (
    <div>
      {/* 使用数组的map方法，在每个组件中访问相应的数据 */}
      {data.map((item, index) => (
        <div key={index}>
          <span>Name: </span>
          <span>{item.name}</span>
          <br />
          <span>Age: </span>
          <span>{item.age}</span>
          <br />
          <span>Email: </span>
          <span>{item.email}</span>
        </div>
      ))}
    </div>
  );
};

export default MyComponent;