WhatsApp Flows中RadioButtonGroup缺失data-source属性问题求助

问题根源 #

你复用的官方示例里，国家数据只放在了data.countries.__example__中，但__example__仅用于WhatsApp Manager的预览展示，实际运行时不会被加载，导致data.countries初始为空数组，触发"data-source缺失"的报错。同理，states也没有设置初始默认值，虽然初始不可见，但不符合规范。

修复步骤 #

1. 将__example__中的国家数据迁移到data.countries.default字段，作为初始加载的选项数据。
2. 给data.states添加default: []，确保初始状态下有合法的空数组值。
3. 保留data-source的绑定语法${data.countries}和${data.states}，这部分是正确的。

修改后的完整代码 #

{
  "version": "6.0",
  "screens": [
    {
      "id": "ADDRESS_SELECTION",
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "RadioButtonsGroup",
            "name": "select_country",
            "label": "Select country:",
            "data-source": "${data.countries}"
          },
          {
            "type": "RadioButtonsGroup",
            "name": "select_states",
            "label": "Select state:",
            "visible": "${data.state_visibility}",
            "data-source": "${data.states}"
          },
          {
            "type": "Footer",
            "label": "Complete",
            "on-click-action": {
              "name": "complete",
              "payload": {}
            }
          }
        ]
      },
      "title": "Address selection",
      "terminal": true,
      "success": true,
      "data": {
        "countries": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "id": {
                "type": "string"
              },
              "title": {
                "type": "string"
              }
            }
          },
          "default": [
            {
              "id": "1",
              "title": "USA",
              "on-select-action": {
                "name": "update_data",
                "payload": {
                  "states": [
                    {
                      "id": "new_york",
                      "title": "New York",
                      "on-unselect-action": {
                        "name": "update_data",
                        "payload": {
                          "pincode_visibility": false
                        }
                      },
                      "on-select-action": {
                        "name": "update_data",
                        "payload": {
                          "pincode": [
                            {
                              "id": "10001",
                              "title": "10001"
                            },
                            {
                              "id": "10005",
                              "title": "10005"
                            }
                          ]
                        }
                      }
                    },
                    {
                      "id": "california",
                      "title": "California",
                      "on-unselect-action": {
                        "name": "update_data",
                        "payload": {}
                      },
                      "on-select-action": {
                        "name": "update_data",
                        "payload": {
                          "pincode": [
                            {
                              "id": "90019",
                              "title": "90019"
                            },
                            {
                              "id": "93504",
                              "title": "93504"
                            }
                          ]
                        }
                      }
                    }
                  ],
                  "state_visibility": true
                }
              },
              "on-unselect-action": {
                "name": "update_data",
                "payload": {
                  "state_visibility": false
                }
              }
            },
            {
              "id": "2",
              "title": "Canada",
              "on-select-action": {
                "name": "update_data",
                "payload": {
                  "states": [
                    {
                      "id": "ontario",
                      "title": "Ontario",
                      "on-unselect-action": {
                        "name": "update_data",
                        "payload": {}
                      },
                      "on-select-action": {
                        "name": "update_data",
                        "payload": {
                          "pincode": [
                            {
                              "id": "L4K",
                              "title": "L4K"
                            },
                            {
                              "id": "M3C",
                              "title": "M3C"
                            }
                          ]
                        }
                      }
                    },
                    {
                      "id": "quebec",
                      "title": "Quebec",
                      "on-unselect-action": {
                        "name": "update_data",
                        "payload": {
                          "pincode_visibility": false
                        }
                      },
                      "on-select-action": {
                        "name": "update_data",
                        "payload": {
                          "pincode": [
                            {
                              "id": "M6B2A9",
                              "title": "M6B2A9"
                            },
                            {
                              "id": "M5V",
                              "title": "M5V"
                            }
                          ]
                        }
                      }
                    }
                  ],
                  "state_visibility": true
                }
              },
              "on-unselect-action": {
                "name": "update_data",
                "payload": {
                  "state_visibility": false
                }
              }
            }
          ],
          "__example__": [
            {
              "id": "1",
              "title": "USA"
            },
            {
              "id": "2",
              "title": "Canada"
            }
          ]
        },
        "states": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "id": {
                "type": "string"
              },
              "title": {
                "type": "string"
              }
            }
          },
          "default": [],
          "__example__": []
        },
        "state_visibility": {
          "type": "boolean",
          "default": false,
          "__example__": false
        }
      }
    }
  ]
}

关键说明 #

• default字段是WhatsApp Flows初始化数据的必填项，__example__仅用于后台预览，不能替代实际的初始数据。
• 修改后，select_country会在加载时直接读取data.countries.default中的国家选项，不会再触发缺失data-source的报错。
• 选择国家后，update_data动作会更新states数组和state_visibility状态，实现州/省选项的动态展示。

内容的提问来源于stack exchange，提问作者Mohannad Al Amad