React项目中导入JavaScript对象后属性返回undefined的问题排查

你的属性访问方式（data.work 或 data["work"]）本身是完全正确的，问题大概率出在data.js的导出逻辑或者experience.js的导入逻辑上，咱们一步步梳理：

1. 检查data.js是否正确导出了对象 #

你只在data.js里定义了const experience，但如果没有显式导出，其他文件是无法获取到这个变量的。这会导致你导入后拿到的是模块默认的空对象，自然访问属性会返回undefined。

修复方案：选择合适的导出方式 #

方式一：命名导出

在data.js里给变量加上export关键字：

// data.js
export const experience = { 
  work: [ { content }, { content } ], 
  event: [ { content }, { content }, { content } ] 
}

然后在experience.js里用命名导入的方式获取：

// experience.js
import { experience } from './data.js';

console.log(experience.work); // 现在应该能正常打印数据了

方式二：默认导出

如果只想导出这一个对象，也可以用默认导出：

// data.js
const experience = { 
  work: [ { content }, { content } ], 
  event: [ { content }, { content }, { content } ] 
}
export default experience;

对应的导入方式（变量名可以自定义，比如你习惯的data）：

// experience.js
import data from './data.js';

console.log(data.work); // 此时就能正确访问属性了

2. 确认导入的变量名与导出匹配 #

如果你用了命名导出，却在导入时没加花括号、或者变量名写错，也会导致拿到空对象。比如：

// 错误示例：命名导出却用默认导入
import experience from './data.js'; // 这样拿到的是模块默认导出，不是你定义的experience对象

总结 #

你的核心问题是没有正确完成模块的导出导入流程，导致实际拿到的不是你定义的experience对象，而是一个空的默认模块对象。调整导出导入方式后，你原本的属性访问逻辑就能正常工作了。

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