React map遍历使用dynamic key获取mapping内部对象失效问题求助

问题原因排查 #

以下是最常见的几类触发原因：

• item.name的实际值与programStructure的key不匹配
  包括大小写不一致、item.name前后携带空白字符、item.name类型与key类型不匹配（比如数字类型和字符串类型的差异）、item.name的值本身不在programStructure的key列表中
• props.programStructure不是普通对象
  如果是Map实例，无法通过[]语法直接访问键值，需要调用内置的get()方法
• 异步数据时序问题
  若programStructure是异步请求返回的数据，首次执行map遍历的时候数据还未完全挂载，不过硬编码字符串可以正常取值的情况下该问题概率较低

解决方法 #

第一步：先补充调试逻辑定位问题 #

在现有代码中增加调试打印，明确item.name的实际值和programStructure的key列表：

data.map((item) => (
  console.log("硬编码取值结果：", props.programStructure["induction"]),
  console.log("当前item.name值：", item.name, "类型：", typeof item.name),
  console.log("programStructure所有key：", Object.keys(props.programStructure))
))

第二步：根据定位结果对应处理 #

1. 若为大小写/空白字符不匹配：统一格式化key后再访问

// 自定义格式化规则和programStructure的key保持对齐即可
const formatKey = (key) => key?.trim().toLowerCase()
data.map((item) => {
  const targetValue = props.programStructure[formatKey(item.name)]
  console.log("动态取值结果：", targetValue)
})

2. 若为Map类型数据：改用get方法取值

data.map((item) => {
  const targetValue = props.programStructure.get(item.name)
  console.log("动态取值结果：", targetValue)
})

3. 若为key不存在的场景：添加兜底逻辑避免报错

data.map((item) => {
  const targetValue = props.programStructure[item.name] ?? '兜底默认值'
  // 也可提前判断key是否存在
  if (Object.prototype.hasOwnProperty.call(props.programStructure, item.name)) {
    console.log("匹配到对应值：", targetValue)
  } else {
    console.log(`未匹配到key：${item.name}`)
  }
})

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