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

朴灿烈づ我的快乐病毒、 2024-03-31 16:46 54阅读 0赞

### 前言 ###

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

### 问题描述 ###

![在这里插入图片描述][3713c6fa726f4d3283fdcecf1ebc64c6.png]

在该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>
        )
    }

这样在切换【单体】时，页面会将【专业】内容清空。

[3713c6fa726f4d3283fdcecf1ebc64c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1acfb9f914204071a5754085014fce21.png