SurveyJS 中下拉框懒加载数据二次打开为空的问题解析

问题现象描述

在使用 SurveyJS 表单库时，开发者可能会遇到一个关于下拉框组件(Select/Dropdown)的特殊问题：当实现级联下拉框并采用懒加载(Lazy Load)方式加载选项数据时，第二次打开下拉框时选项列表显示为空，尽管代码中确实调用了设置选项的方法。

技术背景

SurveyJS 提供了onChoicesLazyLoad事件来实现下拉框选项的懒加载功能。这个事件允许开发者在用户需要时才动态加载选项数据，而不是一次性加载所有选项，这对于大数据量或级联选择场景特别有用。

问题根源分析

经过技术团队调查，发现问题的根本原因在于options.setItems回调函数对参数格式的要求。该方法需要接收特定格式的数据：

1. 可以是一个字符串数组
2. 或者是一个对象数组，每个对象必须包含value和text属性

在原始代码中，开发者直接将对象数组传递给setItems，但这些对象可能不符合上述格式要求，特别是当对象中包含自定义属性(如示例中的values)时。

解决方案

正确的实现方式应该是确保传递给setItems的数据符合以下任一格式：

// 格式一：字符串数组
options.setItems(["选项1", "选项2", "选项3"], totalCount);

// 格式二：对象数组，每个对象必须有value和text属性
options.setItems([
  {value: "1", text: "选项1"},
  {value: "2", text: "选项2"},
  {value: "3", text: "选项3"}
], totalCount);

对于级联下拉框场景，修正后的代码示例如下：

survey.onChoicesLazyLoad.add((_, options) => {
    if (options.question.name === "parentDropdown") {
        const items = parentData.map(item => ({
            value: item.id,
            text: item.title,
            // 可以保留自定义属性用于级联
            childValues: item.childValues 
        }));
        options.setItems(items, items.length);
    }
    
    if (options.question.name === "childDropdown") {
        const parentQuestion = options.question.parent.getQuestionByName("parentDropdown");
        const selectedParent = parentQuestion.selectedItem;
        if (selectedParent) {
            const childItems = selectedParent.childValues.map(item => ({
                value: item.id,
                text: item.name
            }));
            options.setItems(childItems, childItems.length);
        }
    }
});

最佳实践建议

1. 数据格式标准化：始终确保传递给setItems的数据符合要求的格式
2. 级联数据处理：对于级联下拉框，可以在父级选项数据中保留子级数据引用，但子级选项必须转换为标准格式
3. 空状态处理：始终检查父级选择是否有效，避免在未选择父级时尝试加载子级选项
4. 性能优化：考虑实现缓存机制，避免重复加载相同数据

总结

SurveyJS的下拉框懒加载功能非常强大，但需要开发者注意数据格式的规范性。通过遵循API的要求并采用标准化的数据处理方式，可以避免选项显示异常的问题，同时构建出响应迅速、用户体验良好的动态表单应用。