遍历父组件传入对象时属性返回undefined问题求助

可能原因 #

• 控制台快照误导：浏览器控制台打印的引用类型对象会显示最终状态，但代码执行时对象属性可能还未完成赋值（比如异步数据还在解析）。
• 属性名不匹配：截图显示的属性名可能和实际对象的属性名存在大小写/拼写差异（比如InternalCode而非internalCode）。
• 响应式代理包装：如果salesTaxData是被状态管理库（如MobX、Redux Toolkit的Immer）包装的响应式对象，直接用Object.keys遍历可能无法获取真实属性值。

解决方案 #

1. 转换为普通对象后遍历 #

将响应式对象转为普通JS对象，避免代理影响：

const [selectedCategory, setSelectedCategory] = useState<string[]>([]);
useEffect(() => {
    console.log(salesTaxData);
    if (salesTaxData) {
        // 转换为普通对象
        const plainTaxData = Object.assign({}, salesTaxData);
        // 或用JSON序列化/反序列化（注意不能处理函数、Symbol等特殊类型）
        // const plainTaxData = JSON.parse(JSON.stringify(salesTaxData));
        
        Object.keys(plainTaxData).forEach(item => {
            // 先打印子对象确认结构
            console.log(`键${item}对应的数据:`, plainTaxData[item]);
            // 使用可选链安全访问属性
            if (plainTaxData[item]?.internalCode !== undefined) {
                console.log(plainTaxData[item].internalCode);
            }
        });
    }
}, [salesTaxData]);

2. 验证属性名正确性 #

直接打印子对象的所有键，确认属性名是否和预期一致：

Object.keys(salesTaxData).forEach(item => {
    console.log(`键${item}的所有属性:`, Object.keys(salesTaxData[item]));
});

3. 确保数据完全就绪 #

如果父组件是异步获取数据后传递salesTaxData，可以在父组件中确保数据加载完成后再渲染子组件：

// 父组件示例
{salesTaxData && Object.keys(salesTaxData).length > 0 && <ChildComponent salesTaxData={salesTaxData} />}

内容的提问来源于stack exchange，提问作者Dima K.