JavaScript 对象数组未正确导入

Question

我将这个对象数组定义为:

export const trace: IStackTrace[] = [
  {
    ordered_globals: ["c"],
    stdout: "",
    func_name: "<module>",
    stack_to_render: [],
    globals: {
      c: ["REF", 1]
    },
    heap: {
      "1": ["ARRAY", 1, ["REF", 2]],
      "2": ["ARRAY", 2, null]
    },
    line: 2,
    event: "return"
  },
  {
    ordered_globals: ["c", "d"],
    stdout: "",
    func_name: "<module>",
    stack_to_render: [],
    globals: {
      c: ["REF", 1],
      d: ["REF", 3]
    },
    heap: {
      "1": ["ARRAY", 1, ["REF", 2]],
      "2": ["ARRAY", 2, null],
      "3": ["ARRAY", 1, ["REF", 1]]
    },
    line: 2,
    event: "return"
  }
];

导入:

import { trace } from "./Examples";

此代码有效；

const StackTraceView = (props: IProps) => {
   const [stepNumber, setStepNumber] = useState<number>(0);
   const trace = ...
   const currentTrace = trace[stepNumber];
   // ...
}

这不

import { trace } from "./Examples";

const StackTraceView = (props: IProps) => {
   const [stepNumber, setStepNumber] = useState<number>(0);
   const currentTrace = trace[stepNumber];
   // ...
}

这些物体对我来说看起来是一样的。但我的观点不同意。

当我在 React 组件中按照上述方式声明并初始化该变量时，该变量将按预期工作，并且我的显示屏会显示跟踪。但是，当我将此对象放入另一个文件并导入时，或者如果我在“全局”空间中声明此对象，则该对象的深层属性似乎为空，并且我的显示中断。

我不知道在函数作用域内声明这个深层对象数组与导入它之间有什么区别。我尝试深度对象克隆，但仍然得到相同的结果。

非常感谢任何帮助了解正在发生的事情。

编辑:添加了更多上下文。真正的问题是在函数内声明此变量与在函数作用域外声明变量时使用该变量之间有什么区别。

Answer 1

我发现如果我像以前一样导入对象数组，然后我运行:

const traceJson: string = JSON.stringify(trace);
// then
const traceObject = JSON.parse(traceJson);
// ...

这可以正常工作。我仍然不知道是什么原因造成的。它必须是我要导入的对象的格式。不知何故，该函数必须纠正 JSON 不规则性，而在函数范围之外，它不会。

如果有人发现我的 JSON 存在问题，和/或可以告诉我这些范围之间的区别，我很乐意了解并将您的答案标记为已接受。

感谢大家的帮助。