React Native计时组件延迟隐藏时的跨组件状态更新警告问题

问题分析 #

你遇到的警告Cannot update a component (<WorkoutScreen>) while rendering a different component (<Chronometer>)，核心原因是在子组件Chronometer的渲染阶段，直接执行了状态更新和父组件回调——也就是你写在if (timer === 0 && running === true)里的setRunning(false)和onEnd()，这违反了React的规则：渲染阶段必须是纯函数，不能产生副作用（比如修改状态、触发父组件状态更新）。

修复方案 #

把计时结束的判断逻辑从渲染阶段移到useEffect中（useEffect是React专门处理副作用的钩子，会在渲染完成后执行），同时添加对父组件传入seconds的监听，确保每次重新触发计时时，组件能重置状态。

修改后的代码 #

Chronometer.tsx

const Chronometer = ({ seconds, onEnd }: Props) => {
  const [timer, setTimer] = useState<number>(seconds)
  const [pause, setPause] = useState(false)
  const [running, setRunning] = useState(true)

  // 监听父组件传入的seconds变化，重置计时状态（支持重新触发）
  useEffect(() => {
    setTimer(seconds)
    setRunning(true)
    setPause(false)
  }, [seconds])

  // 定时器逻辑：仅负责倒计时
  useEffect(() => {
    let interval: NodeJS.Timer | null = null
    if (!pause && running) {
      interval = setInterval(() => {
        setTimer(prevTimer => prevTimer - 1)
      }, 1000)
    }
    // 清理定时器，防止内存泄漏
    return () => interval && clearInterval(interval)
  }, [pause, running])

  // 处理计时结束逻辑：渲染完成后执行，避免触发警告
  useEffect(() => {
    if (timer === 0 && running) {
      setRunning(false)
      onEnd()
    }
  }, [timer, running, onEnd])

  return (
    <View style={styles.container}>
      <View style={styles.chronometer}>
        <View style={styles.controls}>
          <Text>{formatHhMmSs(timer)}</Text>
        </View>
        <Button
          onPress={() => {
            setPause(!pause)
          }}
        >
          Pause
        </Button>
      </View>
    </View>
  )
}

WorkoutScreen.tsx（无需修改）

保持原代码即可，点击按钮触发inRest状态切换时，子组件会重新挂载并通过useEffect重置计时状态，完美支持重复触发。

修复说明 #

1. 副作用移到useEffect：把计时结束的状态更新和父组件回调放到useEffect中，确保在渲染完成后执行，不会在渲染阶段干扰父组件的状态更新，彻底消除警告。
2. 支持重新触发：添加监听seconds的useEffect，当父组件重新触发计时（比如再次点击按钮），会自动重置timer、running、pause状态，保证每次计时都是全新的流程。
3. 优化定时器清理：移除原代码中无效的空函数清理逻辑，在useEffect的返回函数中正确清理定时器，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Romain Hoffmann