React Native计时器点击按钮无法触发useState更新状态求助

核心问题排查 #

你提到手动修改状态时倒计时正常，说明Countdown组件本身的逻辑没问题，问题大概率出在父组件对isPaused状态的管理或传递上，另外组件内的定时器清理逻辑也可以优化。

具体修复步骤 #

1. 确保父组件正确管理isPaused状态 #

父组件需要维护isPaused的状态，并在按钮点击时切换它，同时正确传递给Countdown组件。示例父组件代码：

import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { Countdown } from './Countdown';

export default function TimerScreen() {
  // 初始化状态为true（倒计时默认暂停）
  const [isPaused, setIsPaused] = useState(true);

  return (
    <View style={styles.container}>
      <Countdown minutes={20} isPaused={isPaused} />
      <Button
        title={isPaused ? '开始倒计时' : '暂停'}
        onPress={() => setIsPaused(!isPaused)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

2. 优化Countdown组件的定时器逻辑 #

当前组件的useEffect在isPaused切换时能清理定时器，但可以优化得更清晰，同时补充处理minutes变化时重置倒计时的逻辑：

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export const Countdown = ({ minutes = 20, isPaused }) => {
  const interval = useRef(null);

  function minuteToMilli(min) {
    return min * 1000 * 60;
  }

  const [milli, setMilli] = useState(minuteToMilli(minutes));

  // 当minutes变化时重置倒计时
  useEffect(() => {
    setMilli(minuteToMilli(minutes));
  }, [minutes]);

  function formatTime(time) {
    return time < 10 ? `0${time}` : time;
  }

  const countdown = () => {
    setMilli((time) => {
      if (time <= 0) {
        clearInterval(interval.current);
        return 0;
      }
      return time - 1000;
    });
  };

  useEffect(() => {
    // 暂停时清理定时器
    if (isPaused) {
      if (interval.current) {
        clearInterval(interval.current);
        interval.current = null;
      }
      return;
    }

    // 开始时启动定时器
    interval.current = setInterval(countdown, 1000);

    // 组件卸载或isPaused变化时清理
    return () => {
      if (interval.current) {
        clearInterval(interval.current);
        interval.current = null;
      }
    };
  }, [isPaused]);

  const minute = Math.floor(milli / 60000) % 60;
  const seconds = Math.floor((milli / 1000) % 60); // 补充Math.floor避免显示小数

  return (
    <Text style={styles.text}>
      {formatTime(minute)} : {formatTime(seconds)}
    </Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 70,
    fontWeight: 'bold',
    color: 'white',
    padding: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    marginBottom: 20,
  },
});

关键修复点说明 #

• 父组件必须通过useState维护isPaused，并在按钮点击时调用setIsPaused切换状态，确保状态更新能触发组件重渲染。
• 优化后的useEffect在暂停时主动清理定时器，避免内存泄漏，同时处理了倒计时归零时的定时器清理。
• 补充了minutes变化时重置倒计时的逻辑，让组件更健壮。

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