Polymer Redux状态异常：函数内state.User为undefined但整体状态正常

嗨，这种情况我之前踩过一模一样的坑！你遇到的本质是浏览器控制台的“实时展开”特性 + 状态对象可能是延迟加载/代理对象导致的，咱们一步步来解决：

1. 先搞清楚控制台的“小把戏” #

浏览器控制台打印对象时，会显示它展开那一刻的实时状态，而不是你调用console.log()时的状态。举个例子：你打印state的时候它其实还没有User属性，但之后代码异步给state加了User，你展开控制台的对象就会看到这个属性，但你单独打印state.User的那一刻，它确实是undefined。

验证这个很简单，用JSON.stringify()打印出那一刻的真实状态：

const state = this.getState();
console.log(JSON.stringify(state)); // 这会显示你调用log时的真实状态，看看有没有User
console.log(state.User);

2. 排查状态对象的类型 #

如果JSON.stringify()里能看到User，但直接访问state.User是undefined，那大概率state是个代理对象（Proxy）或者延迟加载的嵌套对象——很多状态管理库会把嵌套属性包装成getter，只有当你主动访问或者控制台展开时才会解析赋值。

这时候可以试试把它转成普通对象再访问：

const state = this.getState();
const plainState = JSON.parse(JSON.stringify(state));
console.log(plainState.User); // 转成普通对象后再访问试试

3. 检查状态更新的时机 #

如果JSON.stringify()里也没有User，那就是你调用getState()的时候，User还没被异步更新到状态里。比如你的状态是通过API请求、定时器或者框架的异步生命周期更新的，这时候你需要确保在状态更新完成后再访问：

• 如果你用的是React/Vue这类框架，可以在useEffect（React）或者watch/onMounted（Vue）这类生命周期钩子/监听函数里访问状态；
• 临时验证的话，可以加个小延迟试试：

const state = this.getState();
setTimeout(() => {
  console.log(state.User); // 延迟100ms后再访问，看看能不能拿到值
}, 100);

4. 检查getState()的返回值 #

最后可以确认下getState()的返回类型，以及它的属性是否真的存在：

const state = this.getState();
console.log(typeof state); // 确认是object
console.log(Object.keys(state)); // 看看当前状态对象的键里有没有User

按照这几步排查，应该能找到问题所在啦！

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