前言
记录在项目开发中遇到问题的解决方案,方便以后遇到快速解决!
问题描述
在该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>
)
}
这样在切换【单体】时,页面会将【专业】内容清空。