无法访问构造对象的 Javascript 数组的实际值 - 返回未定义答案

【问题标题】：Cannot access the actual value of a Javascript array of constructed objects - returns undefined无法访问构造对象的 Javascript 数组的实际值 - 返回未定义
【发布时间】：2022-01-02 06:12:11
【问题描述】：

我创建了一个表单对象数组

const objectOne = {
    name: 'NameOne',
    data: [{x: 'dataOneX', y: 'dataOneY'},{x: 'dataTwoX', y: 'dataTwoY'}]
};
const objectTwo = {
    name: 'NameOne',
    data: [{x: 'dataOneX', y: 'dataOneY'},{x: 'dataTwoX', y: 'dataTwoY'}]
};
const newArr: [objectOne, objectTwo]

然后我将 newArr 作为道具传递给组件：

< LineChart title='title' data={newArr} />

在组件中，我尝试以下操作： console.log(data) 我在控制台中得到了我的数组。然而， console.log(data[0].name) 返回 undefined，data[0] 返回我传入的原始对象的名称。我正在尝试以这种方式访问数据，以便我可以测试从 API 动态提取并将信息传递到 apexcharts。然而，这对我来说是一个很大的障碍——我是 JS 的新手（我正在使用 react.js）。

很高兴澄清！

编辑：

我的实际代码是：

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

<LineChart
    title="Title"
    xtype="category"
    data={components[0].data}
/>

而传入的内容如下：

function LineChart({ title, data }) {
  console.log(data);
  data.forEach((datum) => console.log(datum.name));
  return(
    <Box>
      <Typography>{title}</Typography>
    </Box>
  ));
}

export default LineChart;

我遇到的问题是 data.forEach((datum) => console.log(datum.name)) 返回 undefined 但数据与我在控制台中的预期完全相同。

【问题讨论】：

正如所写，这个const newArr: [objectOne, objectTwo] 是无效的语法。请提供有关实际使用地点/方式的详细信息。
编辑@RandyCasburn
不要做data: [{ objectOne }, { objectTwo }]。使用data: [objectOne , objectTwo ]。（去掉大括号）。 { objectOne } 创建一个对象，其属性名为objectOne，其值为objectOne 变量的内容。

标签： javascript arrays reactjs object

【解决方案1】：

Gabriele Petrioli回答了in the comments的问题：

不要做data: [{ objectOne }, { objectTwo }]。使用data: [objectOne , objectTwo ]。（删除大括号）。 { objectOne } 创建一个具有名为 objectOne 的属性的对象 value 是objectOne 变量的内容

【讨论】：