1 
    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 };
        })
      );
    }, []);
    
    
              const renderMenu = menu => {
                if (department.length === 0) {
                  return (
                    <p style={{ padding: 4, color: '#999', textAlign: 'center' }}>
                      Loading...
                    </p>
                  );
                }
                return menu;
              };
    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}
                            onOpen={() => {
                             if (department[index]) {
                              department[index] = department[index]
                              setDepartment(department);
                          }
                            }}
                            renderMenu={renderMenu} />
            </div>
          </div>
        ))}
      </div>
    );

如何修复数据不显示例如我尝试选择一个部分然后在它显示之前它不显示的部门我应该添加一个新字段来显示数据。我已经添加了onOpen它，当它打开时它将加载然后它将显示部门的数据。但它没有用。我不确定是不是因为部门是数组。但是我所做的就是这样data={department?.[`dept-${index}`]}。

4

0 回答 0