React Native 路由传参异步处理后访问LayoutData报undefined报错

• 加载状态初值错误。loading初始值为false，组件首次渲染时会直接进入非加载分支渲染拼贴组件；此时numberOfImages、key两个状态仍为undefined，访问LayoutData对应嵌套属性时直接触发未定义对象读取报错。
• 异步参数处理逻辑完全失效。route.params传入的imageNumber、i是同步可读取的普通值，并非Promise对象，对这类值执行await不会产生任何延迟等待效果，无法等待参数、状态就绪后再渲染组件。
• 异常捕获存在拼写错误。catch块接收的错误变量命名为error，但日志输出时写为console.log(err)，一旦流程进入异常分支，会因为未定义变量err触发新的引用错误，导致真实异常完全无法被打印定位。
• 嵌套属性访问无兜底。即使后续状态正常赋值，若传入的imageNumber、key不在LayoutData的合法取值范围内，依然会因读取不存在的属性触发同类崩溃。

• 修改loading的初始值为true，保证组件首次渲染时优先展示加载页面，等所有参数、状态准备完成后再渲染拼贴组件。
• 移除无意义的await操作，直接从路由参数中读取imageNumber、i的值赋值给对应状态，不需要额外包裹异步等待流程。
• 修正catch块的日志代码，将输出的变量名与catch块接收的参数名统一，保证异常可被正常打印。
• 增加属性存在性校验：仅当LayoutData[numberOfImages]存在、且该节点下对应key的配置有效时，才渲染DynamicCollage组件，避免非法入参导致的页面崩溃。

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