const [secDept, setSecuDept] = useState([{ code: null, dept: null }]);
const [department, setDepartment] = useState([]);
useEffect(() => {
const _data = Array.isArray(control.defaultValuesRef.current.section)
? control.defaultValuesRef.current.section
: [{ code: null, dept: null }];
setSecDept(
_data.map((item) => {
return { code: item.code, dept: item.dept };
})
);
}, []);
return (
<div className='flex flex-col w-full'>
{secDept.map((item, index) => (
<div key={index} className='flex flex-col pb-2 items-center'>
<div className='flex pb-2 w-full'>
<SelectPicker
placeholder='Select Section'
data={section['data']}
labelKey='name'
valueKey='code'
className='w-1/2'
cleanable={false}
disabledItemValues={secDept.map((x) => x.code)}
onChange={(value) => {
control.setValue('section', _setSecDept(value, index, 'code'));
const ID = section['data']
.filter((sec) => sec.code === value)
.map((x) => x.id)[0];
(function fetch() {
useDepartments.getAll({ room: ID }).then((response) => {
department[`dept-${index}`] = response['data']['data'];
setDepartment(department);
});
})();
console.log(department);
}}
/>
<SelectPicker
placeholder='Select Department'
data={department?.[`dept-${index}`]}
labelKey='name'
valueKey='code'
className='w-1/2'
cleanable={false}
/>
</div>
</div>
))}
</div>
);
选择房间时如何解决延迟?
当我尝试选择房间时,它不显示部门的数据,例如,我选择Room 1
哪个部门,而不是当我尝试检查部门选择的列表时,它不显示数据,但是当我尝试选择时其他没有部门的房间会在部门选择中显示部门。