react class改hooks写法

类头修改

export default class EditUseTable extends Component

改为

export default function EditUseTable({})

参数修改

constructor(props) {
    super(props)
    const {
      dbRecord, type, currentRecord, readOnly, updateTaxAmount
    } = this.props

改为（主函数的参数）

export default function EditUseTable({
  dbRecord, type, currentRecord, readOnly, updateTaxAmount
  })

状态修改

this.state = {
      tableList: currentRecord?.bookList || [],
      visible: false,
      readOnly: readOnly,
      type: type,
      indexDbId: dbRecord.indexDbId,
      projectId: dbRecord.projectId,
      hasCostIndex: false,
    }

改为（不需要修改的状态直接去掉，直接用props参数就行）

const [tableList,setTableList]=useState(currentRecord?.bookList || [])
    const [visible,setVisible]=useState(false)
    const [hasCostIndex,setHasCostIndex]=useState(false)

初始化函数修改

constructor(props) {
    ……
    // 获取所有XX，根据当前记录上的list做处理
    if ('project' === type) {
      this.initIndexRemainInfo(dbRecord.projectId, currentRecord)
    }
  }

改为

useEffect(()=>{
    // 获取所有XX，根据当前记录上的list做处理
    if ('project' === type) {
      initIndexRemainInfo(dbRecord.projectId, currentRecord)
    }
  },[])

函数改const定义

async initIndexRemainInfo(projectId, currentRecord) {
    ……
  }

改为

const initIndexRemainInfo=async(projectId, currentRecord)=> {
      ……
  }

this.state去掉

this.state.readOnly

改为

readOnly

注意缺少的state要加上
this指针去掉

this.updateData(items, false)

改为

updateData(items, false)

setState改造

this.setState({ indexInfo: indices, hasCostIndex: true })

改为（注意缺少的state定义要补充，例本示例的const [indexInfo,setIndexInfo]=useState([])）

setHasCostIndex(true)
      setIndexInfo(indices)

函数从类中获取的props改造
某函数里这样写

const { formContext, pactPage = '' } = this.props

改为补充到主函数参数里

export default function EditUseTable({
  bizContext:
   { dbRecord, type, currentRecord, readOnly, updateTaxAmount },
   formContext, pactPage = ''
  }) {

render改造

render() {
    const columns = getColumns(type)
    return (
      <Box flex flexlayout={{ direction: 'column' }}>
        
      </Box>
    )
  }

改为（去掉render()壳子）

return (
      <Box flex flexlayout={{ direction: 'column' }}>
        
      </Box>
    )

其中return上面的代码const columns = getColumns(type)放到初始化里

useEffect(() => {
    setColumns(getColumns(type))
  }, [])