[问题]

[Resolution666]

在使用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<WechatMiniprogram.CameraContext>();
cameraContext.current = createCameraContext()
// 创建定时器具柄
const timer = React.useRef<NodeJS.Timer>();
// 页面当前状态
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}
</>
) : (
先眨眨眼，再张张嘴
)
}

{

              <CameraContainer 
                device-position="front" 
                // onStop={eventStop} 
                // onError={eventError} 
                // onInitDone={eventInitDone} 
                flash='off' 
              >
              </CameraContainer>
          }
        </CameraContent>
      ) : (
        <VideoContent >
          <VideoContainer 
            id='myVideo' 
            src={viderObj?.src as string} 
            objectFit={'fill'} 
            playBtnPosition='center'
          />
        </VideoContent>
      )
    }
    <ButtonContent >
      {
        status ===  EMVideoStatus.ONGOING && <StopButton onClick={handleStopRecord}>{mapConfirmTxt.ongoing}</StopButton>
      }
    </ButtonContent>
    <ButtonContent >
      {
        status ===  EMVideoStatus.END && <EndButton>{mapConfirmTxt.end}</EndButton>
      }
      {
        status ===  EMVideoStatus.END &&<ReScanButton user-select={true} onClick={handleStartRecord} >重新拍摄</ReScanButton>
      }
    </ButtonContent>
  </>

);
};`

其他信息
[如截图等其他信息可以贴在这里]

[watsonhaw5566]

不支持在子组件中使用 usePageEvent ，只能在 index.js 中使用 usePageEvent ，请改变自己的使用方式。
另外提问请写入对应的标题。