select组件切换tags时，联动的select组件内容清空

news2025/10/31 10:02:05

前言

记录在项目开发中遇到问题的解决方案，方便以后遇到快速解决！

问题描述

在这里插入图片描述

在该react hooks 页面中，图纸计划附件表格是一个子组件。其中【单体】和【专业】两个下拉select选择框，数据来源依赖于【厂区】。

后端给的接口，必须要先选择【厂区】，才能获取到【单体】数据；选择【单体】后，才能获取【专业】数据。

提测后，测试提了一个bug：数据进行修改，页面渲染数据完成后，切换不同单体，专业数据应清空。

本来以为是一个非常简单的问题，但没想到试了好几种方法仍然没有起效。但也不可能就把这个bug往这一放不管了，还是得继续想办法。

解决方案

最后的解决方案也十分简单，可谓是：众里寻他千百度，蓦然回首，答案却在灯火阑珊处。

Select 组件有两个属性： value、defaultValue 。

而我一般只使用 defaultValue 属性来渲染数据。

只需要把 defaultValue 设置成 undefined 即可。

title: '专业',
dataIndex: 'majorId',
align: 'center',
editable: false,
width: 150,
render: (text: string, record: any, index: number) => {
    return (
        <Select
            style={{width: '100%'}}
            value={text || undefined}
            defaultValue={undefined}
            disabled={!editable}
            onChange={useCallback((val, option) => handleSelectMajor(val, option, index), [list])}
            onDropdownVisibleChange = {useCallback((open) => handleDropDown(open, record, index),[list])}
            showSearch
            filterOption={(input, option) =>
                (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
            }
            placeholder="请选择(可模糊搜索)">
            {
                record.majorList?.map((item: any, index: number) => <Select.Option key={`${item.value}${index}`} value={item.value}>{item.title}</Select.Option>)
            }
        </Select>
    )
}