React TypeScript中forEach遍历属性名访问对象属性返回undefined

你使用的点语法targetData.element，会被JavaScript解析为访问targetData对象上键名**固定为element**的属性，不会自动把遍历拿到的element变量解析为它存储的字符串属性名，因此找不到对应属性时就会返回undefined。

访问对象的动态属性名时，需要使用方括号属性访问语法，将存储属性名的变量传入方括号内即可，修正后的代码如下：

const countTargetOptions = [
  "count_targets",
  "count_targets_excluded",
  "count_targets_pending",
  "count_targets_in_progress",
  "count_targets_completed",
  "count_targets_failed",
];

countTargetOptions.forEach((element: string) =>{
  console.log(targetData[element]);
});

• 点语法：仅适用于访问键名是固定字面量、符合标识符命名规则的属性，比如直接写targetData.count_targets就是合法的点语法用法
• 方括号语法：支持传入变量、表达式作为属性名，代码运行时会先计算方括号内的最终值，再去对象上匹配对应键的属性，适配你当前需要动态遍历属性名访问的场景

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