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

news2024/11/8 20:33:53

前言

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

问题描述

在这里插入图片描述

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

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

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


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

解决方案

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

Select 组件有两个属性: valuedefaultValue

而我一般只使用 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>
    )
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/74095.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

9微电网两阶段鲁棒优化经济调度方法(MATLAB程序)

联系2645521500 复现文章&#xff1a; 微电网两阶段鲁棒优化经济调度方法——刘一欣&#xff08;中国电机工程学报&#xff09; 主要内容&#xff1a; 针对微电网内可再生能源和负荷的不确定性&#xff0c;建立了min-max-min 结构的两阶段鲁棒优化模型&#xff0c;可得到最…

SpringCloud微服务网关gateway

SpringCloud微服务网关gateway 网关简介 大家都都知道在微服务架构中&#xff0c;一个系统会被拆分为很多个微服务。那么作为客户端要如何去调用这么多的微服务呢&#xff1f; 如果没有网关的存在&#xff0c;我们只能在客户端记录每个微服务的地址&#xff0c;然后分别去用…

word电子版签名

word电子版签名 问题 word如何实现电子版签名 解决方案一 1 在纸上使用签字笔签名并进行拍照 2 对图片进行使用电子扫描 对于图片进行使用电子扫描&#xff0c; 可选择的app与微信小程序较多&#xff0c;可自行选择&#xff0c;对于app&#xff0c; 笔者推荐全能扫描王&a…

康沣生物通过上市聆讯:年亏损过亿 高瓴与比邻星是股东

雷递网 雷建平 12月7日康沣生物科技&#xff08;上海&#xff09;股份有限公司&#xff08;简称&#xff1a;“康沣生物”&#xff09;日前通过聆讯&#xff0c;准备在港交所上市。年亏损过亿康沣生物是一家专注于冷冻消融微创介入治疗技术在心血管领域应用的企业。康沣生物CEO…

我的年度用户体验趋势报告——由 ChatGPT AI 撰写

Our yearly UX trends report, but written by the ChatGPT AI作为今年用户体验集体计划的一部分&#xff0c;我们刚刚发布了年度用户体验状态报告。只是为了好玩&#xff0c;我们想测试ChatGPT人工智能对新一年用户体验趋势的看法&#xff0c;看看哪些预测一致&#xff0c;哪些…

移植第二天知识点整理

一&#xff1a; uboot源码移植准备工作 1.在家目录下创建一个<demo>文件夹 2.将en.SOURCES-stm32mp1-openstlinux-5.10-dunfell-mp1-21-11-17_tar_v3.1.0.xz文件夹拷贝到demo目录下 3.对en.SOURCES-stm32mp1-openstlinux-5.10-dunfell-mp1-21-11-17_tar_v3.1.0.xz进行解…

探秘微信业务优化:DDD从入门到实践

引言 | 本文作者从微信团队维护的带货类项目所遇卡点出发&#xff0c;尝试用领域驱动设计方法&#xff08;简称DDD&#xff09;&#xff0c;保障在快节奏、多人协作的项目迭代中&#xff0c;维持系统的可维护性、可拓展性、高内聚低耦合和稳定性。作者首先剖解相关概念原理&…

福建师范大学Android Room 技术浅谈

福建师范大学Android Room 技术浅谈 ## 前提告知该文章是用作课程评分,本文内容虽为原创&#xff0c;但也有参考。 1.Room的背景简介 处理大量结构化数据的应用可极大地受益于在本地保留这些数据。最常见的使用场景是缓存相关的数据&#xff0c;这样一来&#xff0c;当设备无…

JVM虚拟机内存结构详解,一文带你学习完80%的知识

程序计数器 定义 Program Counter Register 程序计数器&#xff08;寄存器&#xff09; 作用&#xff1a;是记录下一条 jvm 指令的执行地址行号特点&#xff1a; 是线程私有的&#xff0c;随着线程创建而创建&#xff0c;随着线程销毁而销毁不会存在内存溢出是一块较小的内存…

CVPR 2019|APCNet:基于全局引导的局部匹配度自适应金字塔上下文网络

&#x1f3c6;本篇论文发现了一种全局引导的局部匹配度&#xff08;Global-guided Local Affinity (GLA))特征&#xff0c;用于构造上下文语义信息。基于此特性&#xff0c;作者设计了自适应上下文模块&#xff0c;构建自适应金字塔上下文网络&#xff08;APCNet&#xff09;。…

手工测试2年面临职场危机,3个月进阶自动化测试后,老板终于留我了...

​前言 从学校到职场已经3年时间了&#xff0c;大学学的计算机专业&#xff0c;最开始事项从事java开发的&#xff0c;最终被现实打败&#xff0c;然后就从事了软件测试&#xff0c;现在已近过去了2年&#xff0c;为什么说是2年了&#xff0c;大学毕业有一段空窗期&#xff0c…

大数据面试之HDFS常见题目

大数据面试之HDFS常见题目 HDFS常见题目 1 HDFS读流程和写流程 1.1 读流程&#xff08;下载&#xff09; 文字描述&#xff1a; ​ 客户端将要读取的文件路径发送给 NameNode&#xff0c;NameNode 获取文件的元信息&#xff08;主要是 block 的存放位置信息&#xff09;返回…

美团外卖推荐智能流量分发的实践与探索

总第548篇2022年 第065篇美团外卖推荐团队在推荐算法的长期落地实践中&#xff0c;针对外卖业务情境化特点对排序模型进行深入探索与优化。本文介绍了面向情境化建模的“情境细分统一模型”建模思路&#xff0c;通过用户行为序列建模以及专家网络两个模块的优化&#xff0c;实现…

简单实用:css+html绘制常见图表

提到绘制图表&#xff0c;大家可能想到ECharts&#xff0c;其实&#xff0c;一些简单的图表可以直接通过csshtml实现&#xff0c;下面手把手带大家绘制&#xff0c;初学者也能轻松掌握。 1 csshtml绘制柱形图 我们先写一个超简单的html文件。 <div class"bargraph&q…

多维数组地址映射问题的求解(3维、4维为例)——数据结构

在上篇我大概介绍了多维数组的地址映射问题&#xff0c;但是不够完善&#xff0c;很多朋友还没有彻底学会&#xff0c;表示很头疼。这一方面的总结确实比较少&#xff0c;而且也很麻烦&#xff0c;但是不要怕&#xff0c;看完我的总结&#xff0c;相信你一定会有一直醍醐灌顶的…

《2022中国PaaS市场研究及选型评估报告》正式发布

《中智观察》第1741篇推送作者&#xff1a;海比研究院编辑&#xff1a;晓晓编审&#xff1a;赵满头图来源&#xff1a;中国软件网从2006年概念兴起至今&#xff0c;云计算已经在国内走过整整十五年的历程。云计算的三大模式SaaS、PaaS、IaaS从陌生到熟悉&#xff0c;从研发到应…

ML Journal6—OpenCV中的GUI功能

图像入门这是将在本教程中使用的图像borz.jpgimport cv2 as cv import sysimg cv.imread(borz.jpg) if img is None:sys.exit("Could not read the file.") cv.imshow("Display Window", img) k cv.waitKey(0) if k ord("s"):cv.imwrite(&quo…

《自己动手写CPU》学习记录(5)——第5章/Part 1

目录 引言 致谢 流水线的数据相关问题 问题分析 RAW类型 1、相邻指令数据相关 2、间隔1条指令数据相关 3、间隔2条指令数据相关 修改后的代码 译码模块 指令执行模块 顶层模块 测试 测试代码 生成.data初始化文件 仿真结果 引言 随章节进度继续推进&#xff0c…

【视频】马尔可夫链原理可视化解释与R语言区制转换MRS实例|数据分享

原文链接&#xff1a;http://tecdat.cn/?p12280马尔可夫链是从一个“状态”&#xff08;一种情况或一组值&#xff09;跳到另一个“状态”的数学系统。本文介绍了马尔可夫链和一种简单的状态转移模型&#xff0c;该模型构成了隐马尔可夫模型&#xff08;HMM&#xff09;的特例…

近期方案研究总结(那些你用的到的排列组合)

方案一 这个方案只一个位置一个号码&#xff0c;标的物即一个位置八十期不重即可以切入&#xff0c;以这样的思路去进行扩充。 纬度一 两期重复形态为&#xff1a;11、22、33、44、55、66、77、88、99、1010。 数上升一形态为&#xff1a;12、23、34、45、56、67、78、89、910…