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))}, [])