Redux Store嵌套循环渲染报person.child undefined错误的原因排查

• 直接硬访问属性没有空值兜底是触发报错的核心
  你写的person.child.map()逻辑，默认假设列表里的每一个person节点都一定存在child属性，且child是可遍历的数组，但这个假设在动态变化的Redux Store中并不成立。哪怕你本地定义的初始状态里两个person节点都带了child数组，只要后续的reducer做不可变更新时出现疏漏——比如新增person节点时只传了id和name字段、更新节点时生成的新对象没把旧对象的child字段完整保留、异步接口往列表里插入的节点和本地定义的结构不匹配——遍历到对应缺失child字段的person时，拿到的person.child就是undefined，自然无法调用map方法。
• 不要把静态定义的初始状态，当成永久不变的动态结构
  很多人会把本地写死的INITIAL_PEOPLE当成Store里永远不变的结构模板，忽略Redux全局状态是持续动态更新的，在没有加额外结构校验的场景下，任何一处状态更新的疏漏，都会直接传导到渲染层触发属性访问错误。

不需要改动外层循环的逻辑，只需要在调用child的map方法前加一层非空判断即可，两种常用写法可以按需选：

1. 兼容所有运行环境的传统判断写法

{person.child && person.child.map(child => 
  <span key={child.id}>{child.name}</span>
)}

2. 更简洁的现代JS可选链写法

{person.child?.map(child => 
  <span key={child.id}>{child.name}</span>
)}

额外提示：你当前嵌套的child遍历没有给返回的节点包裹独立DOM标签，同时map返回的child元素也没有设置唯一key，就算解决了undefined报错，也会触发React的列表渲染警告，建议补上对应逻辑，保证页面渲染合规。

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