[问题] - Githubissues

在使用remax写函数组件时，我在父组件中条件渲染子组件，当满足条件的子组件渲染时，在子组件中使用usePageEvent监听子组件的onShow, onReady, onLoad 等生命周期均不执行，只有 react 中提供的useEffect 执行了

父组件 `const LiveDetection:React.FC = () => { const [ step, setStep ] = useState(0)

const nextStep = useCallback(() => {
    setStep(step => step + 1)
}, [step])

const resetStep = useCallback(() => {
    setStep(0)
}, [])

useEffect(() => {
    return () => {
        console.log('unmout')
        resetStep()
    }
}, [])

return (
    <View>
        {
            step === 0  && <StepOne nextStep={nextStep} />
        }
        {
            step === 1  && <StepTwo />
        }
    </View>
)

子组件

`const StepTwo:React.FC = () => { // 创建相机上下文对象 const cameraContext = React.useRef(); cameraContext.current = createCameraContext() // 创建定时器具柄 const timer = React.useRef(); // 页面当前状态 const [ status, setStatus ] = React.useState(EMVideoStatus.INIT) // 相机是否 ready const [ ready, setReady ] = React.useState(false) // 倒计时参数 const [ countingNum, setCountingNum ] = React.useState(5) // 视频对象 const [ viderObj, setVideoObj ] = React.useState()

usePageEvent('onReady', () => { console.log('onReady =====>') })

// React.useEffect(() => { // // 绑定相机上下文对象 // cameraContext.current?.startRecord({ // success:function (res) { // console.log('startRecord=====> ', res) // } // }) // }, [])

React.useEffect(() => { if(!ready){ // 监听ready状态，当ready为 false 时，设置定时器，执行倒计时 timer.current = setInterval(() => { setCountingNum((state) => state - 1) }, 1000) } return () => { clearInterval(timer.current) } }, [ready])

React.useEffect(() => { if(countingNum === 0 && !ready){ // 倒计时结束，改变ready状态，清除定时器，设置当前status clearInterval(timer.current) setReady(true) setStatus(EMVideoStatus.ONGOING) cameraContext.current?.startRecord({ success:function (res) { console.log('startRecord=====> ', res) } }) } }, [countingNum])

// 初始化相机参数 const initCamera = () => { setVideoObj({ src: '' }); setReady(false); setCountingNum(5) setStatus(EMVideoStatus.INIT) }

// 开始录像 const handleStartRecord = async () => { console.log(cameraContext) initCamera() }

// 结束录像 const handleStopRecord = () => { console.log(cameraContext.current) cameraContext.current?.stopRecord({ success: function (res) { console.log('stopRecord=====> ', res) setStatus(EMVideoStatus.END) setVideoObj({ src: res.tempVideoPath}) }, fail: function (error) { console.log(error) } }) }

// 摄像头在非正常终止时触发 const eventStop = () => {

} // 用户不允许使用摄像头时触发
const eventError = () => {

} // 相机初始化完成时触发 const eventInitDone = () => {

} return ( <>

请确保正脸水平对准屏幕摄像区先眨眨眼，再张张嘴 { status !== EMVideoStatus.END ? ( { countingNum !== 0 ? ( <> 拍摄倒计时 {countingNum} ) : ( 先眨眨眼，再张张嘴 ) } { } ) : ( ) } { status === EMVideoStatus.ONGOING && {mapConfirmTxt.ongoing} } { status === EMVideoStatus.END && {mapConfirmTxt.end} } { status === EMVideoStatus.END &&重新拍摄 } ); };` **其他信息** [如截图等其他信息可以贴在这里]

remaxjs / remax

[问题] #1941