將 React Class 組件轉換為功能組件

Question

我對 React 非常陌生，下面是我想使用 useEffect 鈎子轉換為功能組件的部分代碼。 但我不確定如何進行這種轉換。

Class 組件

componentDidMount(){
this.setState({
patchVal:this.props.patchTaskVal,
startTime:this.props.patchStartTime,
setEndTime:this.props.patchEndTime
})
}

componentDidUpdate(prevProps){
if(prevProps.patchTaskVal!==this.props.patchTaskVal){
this.callValidation()
}
if(prevProps.closeTask!==this.props.closeTask){
this.setState({
showValue:false,
progressValue:[],
startTime:new Date(),
setEndTime:""
})
}
if(prevProps.patchStartTime!==this.props.patchStartTime || prevProps.endTime!==this.props.endTime && this.props.endTime!==""){
this.setState({
startTime:this.props.patchStartTime,
setEndTime:parseInt(this.props.endTime)
})
}
}

誰能幫我把它轉換成 useEffect 鈎子？ 提前致謝！！

Answer 1

const [patchTaskVal, setPatchTaskVal]=useState(/*initial value */) 
const [startTime, setStartTime]=useState()
const [endTime, setEndTime] = useState()
useEffect( ()=>{
    setPatchTaskVal(props.patchTaskVal)
    ...//set other states
}, [])

useEffect( ()=> {
    callValidation() 
},[props.patchTaskVal])

useEffect( ()=>{
//setShowValue...
},[props.closeTask])

useEffect( ()=>{
    if(props.endTime!=""){
    // set states...
    }
},[props.patchStartTime,props.endTime]