JavaScript构造对象数组传入React组件访问属性返回undefined求助

你构造components[0].data数组时误用了对象简写语法，最终传入组件的数组结构和你预期不符：
你写的代码：

const components = [
    {
      title: 'Headcount',
      data: [{ objectOne }, { objectTwo }]
    }
 ]

这里的{ objectOne }是ES6对象简写，等价于{ objectOne: objectOne }，所以最终components[0].data的实际结构是：

[
  { objectOne: { name: 'NameOne', data: [...] } },
  { objectTwo: { name: 'NameOne', data: [...] } }
]

遍历数组时拿到的datum是外层的包装对象，本身没有name属性，所以datum.name返回undefined。
你看到console.log(data)符合预期是浏览器控制台的懒加载特性导致的：控制台打印数组时默认只显示预览，你点击展开才会加载完整结构，只要仔细看预览信息就能看到每个元素外层有一层和变量名相同的键。

直接去掉数组元素外层的多余大括号，传入你定义的对象本身即可：

const components = [
    {
      title: 'Headcount',
      data: [objectOne, objectTwo] // 移除了包裹objectOne、objectTwo的大括号
    }
 ]

修改后数组元素就是你定义的带name属性的原始对象，datum.name就可以正常读取到对应值。

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