SchoolYear.tsx

/*
  學年元件：
    1、使用時傳入onChange事件，形如：<SchoolYear onChange={onSchoolYearChange} />
    2、預設為選中當前學年，如要不需要，設定 isSelected={false}
*/
import React, { useState, useEffect } from 'react'
import { Select } from 'antd'
import { useFetchState } from '@/utils/hooks'

import { getSchoolYearOptions } from 
 
'@/services/select'

interface OptionType {
  id: number
  name: string
}

interface SchoolYearProps {
  onChange?: (value: any) => void
  isSelected?: boolean
  isAllowClear?: boolean // 如果要支援清除，就傳入 isAllowClear
  options?: Array<object> // 如果傳入了學年options，元件內就不請求資料了
}

const SchoolYear: React.FC
 
<SchoolYearProps> = (Props: any) => {
  const { onChange, isSelected = true, isAllowClear = false, options = [] } = Props
  const [yearOption, setYearOption] = useFetchState([]) // 學年選項list
  const [initYear, setInitYear] = useState() // 預設選中學年

  // 格式化介面資料，用於下拉框回顯
  const format = (options: any[]) =>
    options.map(({ name, id }: OptionType) 
 
=> ({
      label: `${name}學年`,
      value: id
    }))

  const set = (options: any) => {
    setYearOption(format(options))
    if (isSelected) {
      const year = options.find((item: any) => item.isCheck).id
      setInitYear(year)
      onChange(year)
    }
  }

  // 獲取學年options
  const fetchYearOptions = async () => {
    if (options.length) {
      // console.log(options, format(options))
      set(options)
    } else {
      try {
        const { success, data, msg } = await getSchoolYearOptions()
        if (success && data) {
          set(data)
          return data
        }
        throw new Error(msg)
      } catch (err) {
        return false
      }
    }
  }

  useEffect(() => {
    fetchYearOptions()
  }, [])

  return (
    <Select
      onChange={onChange}
      allowClear={isAllowClear}
      placeholder="請選擇學年"
      showSearch
      options={yearOption}
      defaultValue={initYear}
      key={initYear}
    />
  )
}

export default SchoolYear

使用：

　　第一種情況：傳入options

    {
      title: '所屬學年',
      dataIndex: 'projectYear',
      key: 'projectYear',
      renderFormItem: () => <SchoolYear onChange={onSchoolYearChange} options={yearOptions} />
    }

　　第二種情況：不傳options

            <Form.Item label="學年" name="projectYear" >
              <SchoolYear onChange={onChangeYear} />
            </Form.Item>

注意：

　　1、注意非同步的資料，傳遞到元件時的先後順序

　　2、通過change事件將當前學年繫結到父元件中