View a markdown version of this page

数据依赖关系和时机注意事项 - AWS 应用程序工作室
示例：订单详情和客户信息数据依赖和时机最佳实践

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

数据依赖关系和时机注意事项

在 App Studio 中构建复杂应用程序时，了解和管理不同数据组件（例如表单、详细视图和自动化组件）之间的数据依赖关系至关重要。数据组件和自动化可能无法同时完成其数据检索或执行，这可能会导致计时问题、错误和意外行为。通过了解潜在的时间问题并遵循最佳实践，您可以在 App Studio 应用程序中创建更可靠、更一致的用户体验。

一些潜在的问题如下：

  1. 渲染时间冲突：数据组件的渲染顺序可能与其数据依赖关系不一致，这可能会导致视觉不一致或错误。

  2. 自动化运行时间：自动化任务可能在组件完全加载之前完成，从而导致运行时执行错误。

  3. 组件崩溃：由自动化提供支持的组件可能会因响应无效或自动化尚未完成运行而崩溃。

示例：订单详情和客户信息

此示例演示了数据组件之间的依赖关系如何导致时序问题和数据显示中的潜在错误。

假设一个在同一页面上具有以下两个数据组件的应用程序：

  • 获取订单数据的细节组件 (orderDetails)。

  • 显示与订单相关的客户详细信息的详细信息组件 (customerDetails)。

在此应用程序中，orderDetails详细信息组件中有两个字段，使用以下值进行配置：

// 2 text fields within the orderDetails detail component

// Info from orderDetails Component
{{ui.orderDetails.data[0].name}} 

// Info from customerDetails component
{{ui.customerDetails.data[0].name}} // Problematic reference

在此示例中，orderDetails组件尝试通过引用customerDetails组件中的数据来显示客户名称。这是有问题的，因为orderDetails组件可能会在customerDetails组件获取其数据之前进行渲染。如果customerDetails组件数据提取延迟或失败，则orderDetails组件将显示不完整或不正确的信息。

数据依赖和时机最佳实践

使用以下最佳实践来缓解 App Studio 应用程序中的数据依赖和时序问题：

  1. 使用条件渲染：仅在确认组件可用时才渲染组件或显示数据。在显示数据之前，使用条件语句检查数据是否存在。以下代码段显示了条件语句示例：

    {{ui.someComponent.data ? ui.someComponent.data.fieldName : "Loading..."}}

  2. 管理子组件的可见性：对于在 Stepflow、Form 或 Detail 等在加载子组件数据之前呈现子组件的可见性，手动设置子组件的可见性。以下代码段显示了根据父组件数据可用性设置可见性的示例：

    {{ui.parentComponent.data ? true : false}}

  3. 使用联接查询：如果可能，使用联接查询在单个查询中提取相关数据。这减少了单独数据提取的数量，并最大限度地减少了数据组件之间的时序问题。

  4. 在自动化中实现错误处理：在自动化中实现强大的错误处理，以优雅地管理预期数据不可用或收到无效响应的情况。

  5. 使用可选链接：访问嵌套属性时，使用可选链接，以防止父属性未定义时出错。以下代码段显示了可选链接的示例：

    {{ui.component.data?.[0]?.fieldSystemName}}