同一Flow屏幕多个必填LWC组件校验时避免值丢失的问题求解

问题根因 #

你出现该问题的核心原因是直接修改了@api修饰的value属性：当Flow屏幕上任意自定义组件校验失败后，Flow会刷新当前屏幕所有自定义组件的@api属性为初始传入值，你没有用内部私有变量存储用户输入，直接修改公共属性的值会被Flow的刷新逻辑覆盖，导致所有组件的已选值被清空。

修复方案 #

需要做3处调整即可解决问题：

• 新增私有变量存储用户实际选择值，@api修饰的value仅作为初始值接收入口
• 选择值变化时，通过FlowAttributeChangeEvent事件主动通知Flow更新值，不要直接修改@api value
• 校验逻辑读取内部私有变量的值进行判断

修改后component.js代码

import { LightningElement, api } from 'lwc';
import { FlowAttributeChangeEvent } from 'lightning/flowSupport';

export default class StringPicklistFlowComponent extends LightningElement {
    @api optionsArr;
    @api label;
    @api isRequired = false;
    @api value;
    // 私有变量存储实际选择值
    _selectedValue;

    // 组件初始化时把传入的初始值赋值给私有变量
    connectedCallback() {
        if (this.value) {
            this._selectedValue = this.value;
        }
    }

    get isNotRequired(){return !this.isRequired;}

    get options(){
        const arr = [];
        for(let i = 0; i < this.optionsArr.length; i++){
            const tmp = this.optionsArr[i].split(/,\s*/g);
            arr.push({label: tmp[0], value: tmp[1]});
        }
        return arr;
    }

    handleSelect(evt){
        this._selectedValue = evt.detail.value;
        // 通知Flow更新公共属性value的值
        const attributeChangeEvent = new FlowAttributeChangeEvent('value', this._selectedValue);
        this.dispatchEvent(attributeChangeEvent);
    }

    @api validate(){
        return {
            isValid: this.isNotRequired || this._selectedValue != null,
            errorMessage: "Please select an option"
        }
    }
}

修改后component.html代码

仅需调整combobox的value绑定对象为私有变量即可：

<template>
    <label for="customPicklist" class="slds-form-element__label slds-rich-text-editor__output">
        <span class="slds-required" hidden={isNotRequired}>*</span>
        {label}
    </label>
    <lightning-combobox id="customPicklist" value={_selectedValue} options={options} onchange={handleSelect}>
    </lightning-combobox>
</template>

效果说明 #

该修改完全符合Flow自定义组件的开发规范，公共@api属性仅作为Flow和组件的通信入口，组件内部状态通过私有变量维护，值变更主动通知Flow，校验失败时Flow不会重置组件内部私有变量的状态，已选值不会被清空，同时完全保留你自定义label和必填提示的交互逻辑。

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