React中如何使用map()遍历普通对象渲染JSX？

map()是数组原型上内置的遍历方法，仅数组类型实例可以直接调用。你定义的data是普通对象类型，本身没有挂载map方法，直接调用就会抛出"Property 'map' does not exist"的报错。

核心思路是先通过Object的内置静态方法，把对象转换成可遍历的数组结构，再调用map()遍历返回JSX节点即可，根据业务场景选对应方法：

• 使用Object.entries()（最常用，可同时拿到键和值）
  该方法会返回对象所有键值对组成的二维数组，数组每一项的第一个元素是键名，第二个元素是对应的值，解构后可直接使用，渲染时记得给列表项传入唯一的key属性：

  const data = {
    1: "apples",
    2: "bananas",
    3: "cherries"
  }
  
  // 渲染逻辑示例
  <ul>
    {Object.entries(data).map(([key, value]) => {
      return <li key={key}>{value}</li>
    })}
  </ul>
  

• 使用Object.keys()（仅需要键名时使用）
  该方法会返回对象所有键名组成的数组，遍历过程中可以通过键名回查对应的值：

  <ul>
    {Object.keys(data).map((key) => {
      return <li key={key}>{data[key]}</li>
    })}
  </ul>
  

• 使用Object.values()（仅需要属性值时使用）
  该方法会返回对象所有属性值组成的数组，遍历过程中拿不到对应的键名，如果列表项没有其他唯一标识，万不得已可以用遍历索引作为key：

  <ul>
    {Object.values(data).map((value, index) => {
      return <li key={index}>{value}</li>
    })}
  </ul>
  

不要直接在JSX中写for...in循环做遍历，JSX的大括号内仅支持嵌入表达式，for...in属于流程语句，无法直接返回渲染节点，先转数组再调用map()是JSX场景下遍历对象的标准写法。

内容的提问来源于stack exchange，提问作者JeremyBearimy