React Native计时器应用出现NaN错误排查求助

问题原因 #

在Timing组件中，你将setMinutes作为onChangeTime传入，但点击+/-按钮时，直接执行onChangeTime(onChangeTime + 1)——这里的onChangeTime是React的状态更新函数，并非当前的minutes值，函数与数字相加会得到NaN，导致状态更新异常。此外，Countdown组件初始渲染时millis为null，计算时分秒时也会产生NaN。

修复方案 #

1. 改用函数式更新状态 #

React的setState支持传入函数，函数参数为当前最新的状态值，能正确基于当前值进行增减操作，同时添加边界判断避免分钟数为负数。

修改Timing.js：

//Timing.js
export const Timing = ({ onChangeTime }) => {
  return (
    <>
      <View style={styles.timingButton}>
        <RoundedButton size={75} title="+" onPress={() => onChangeTime(prev => prev + 1)} />
      </View>
      <View style={styles.timingButton}>
        <RoundedButton size={75} title="15" onPress={() => onChangeTime(15)} />
      </View>
      <View style={styles.timingButton}>
        <RoundedButton size={75} title="-" onPress={() => onChangeTime(prev => Math.max(0, prev - 1))} />
      </View>
    </>
  );
};

2. 处理Countdown初始值为null的情况 #

在Countdown.js中，对millis为空的情况做兜底处理，避免计算时分秒时出现NaN：

//Countdown.js
//...
const minute = millis ? Math.floor(millis / 1000 / 60) % 60 : 0;
const seconds = millis ? Math.floor(millis / 1000) % 60 : 0;
//...

修复说明 #

• 函数式更新onChangeTime(prev => prev +1)能获取当前最新的minutes值，避免直接操作状态更新函数导致的类型错误。
• Math.max(0, prev -1)确保分钟数不会变为负数，防止后续倒计时逻辑异常。
• 给minute和seconds添加millis判断，处理初始渲染时的空值情况，避免界面显示NaN。

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