React中如何使用map方法获取嵌套对象数组内的XYZ属性值

你可以直接访问data对象下的message数组，调用map方法遍历每一项，取出XYZ属性即可：

1. 单独提取属性值到数组 #

// 执行后得到的xyzValues为 ['Hi', 'Hello', 'How Are You']
const xyzValues = data.message.map(item => item.XYZ)

2. React中直接渲染场景 #

如果需要在JSX里直接渲染这些值，写法如下：

function RenderXYZ() {
  const data = { 
    message: [ 
      { XYZ: 'Hi' },
      { XYZ: 'Hello' },
      { XYZ: 'How Are You' }
    ],
    number: '121212121'
  }

  return (
    <ul>
      {data.message.map((item, index) => (
        // 实际项目有唯一ID优先用ID做key
        <li key={index}>{item.XYZ}</li>
      ))}
    </ul>
  )
}

注意事项 #

• 遍历渲染JSX元素必须加key属性，否则React会抛出开发环境警告
• 若data为异步请求获取的动态数据，建议加可选链做兼容，避免请求完成前访问不存在的属性报错：

  // 可选链兼容写法
  const xyzValues = data?.message?.map(item => item.XYZ) || []
  

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