react class改hooks写法

类头修改

export default class EditUseTable extends Component 
1

改为

export default function EditUseTable({})
1

参数修改

constructor(props) {
    super(props)
    const {
      dbRecord, type, currentRecord, readOnly, updateTaxAmount
    } = this.props
1
2
3
4
5

改为（主函数的参数）

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

状态修改

this.state = {
      tableList: currentRecord?.bookList || [],
      visible: false,
      readOnly: readOnly,
      type: type,
      indexDbId: dbRecord.indexDbId,
      projectId: dbRecord.projectId,
      hasCostIndex: false,
    }
1
2
3
4
5
6
7
8
9

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

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

初始化函数修改

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

改为

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

函数改const定义

async initIndexRemainInfo(projectId, currentRecord) {
    ……
  }
1
2
3

改为

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

this.state去掉

this.state.readOnly
1

改为

readOnly
1

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

    this.updateData(items, false)
1

改为

updateData(items, false)
1

setState改造

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

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

      setHasCostIndex(true)
      setIndexInfo(indices)
1
2

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

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

改为补充到主函数参数里

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

render改造

render() {
    const columns = getColumns(type)
    return (
      { direction: 'column' }}>
        
      
    )
  }
1
2
3
4
5
6
7
8

改为（去掉render()壳子）

return (
      { direction: 'column' }}>
        
      
    )
1
2
3
4
5

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

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