javascript - 如何修复第二次选择时的延迟显示数据

Question

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哪个部门，而不是当我尝试检查部门选择的列表时，它不显示数据，但是当我尝试选择时其他没有部门的房间会在部门选择中显示部门。

标签： javascriptreactjsreact-hooksrsuite