在React及JavaScript中如何正确映射对象指定key对应的数组值

核心逻辑是用方括号属性访问语法读取动态key对应的数组，同时做边界判断避免取值为undefined时报错：

// 核心取值逻辑，空值合并运算符保证取值始终是数组，避免遍历报错
const targetArray = bigObj[objId] ?? []

不同场景的实现示例 #

React #

function StatusList({ bigObj, objId }) {
  const targetList = bigObj[objId] ?? []
  return (
    <div className="status-list">
      {targetList.map((item, idx) => (
        // 实际项目建议用item内唯一字段做key，此处仅为示例
        <div key={idx}>当前状态：{item.status}</div>
      ))}
    </div>
  )
}

Vue 3 #

<template>
  <div class="status-list">
    <div v-for="(item, idx) in targetList" :key="idx">
      当前状态：{{ item.status }}
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
  bigObj: {
    type: Object,
    required: true
  },
  objId: {
    type: String,
    required: true
  }
})
// 动态计算对应数组
const targetList = computed(() => props.bigObj[props.objId] ?? [])
</script>

原生JavaScript #

const targetList = bigObj[objId] ?? []
const container = document.querySelector('#your-container')
targetList.forEach(item => {
  const statusEl = document.createElement('div')
  statusEl.textContent = `当前状态：${item.status}`
  container.appendChild(statusEl)
})

注意事项 #

• 必须用[]访问动态key，不能用.语法：bigObj.objId会读取名称为objId的固定key，而非objId变量存储的id值
• 必须加空值兜底逻辑：当传入的objId不在bigObj的key中时，取值为undefined，直接调用map/forEach等数组方法会抛出类型错误
• 列表渲染的key优先使用数组元素内的唯一字段，仅当数组无顺序变化需求时可用索引作为临时key

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