React Native从TextInput获取数值时遭遇类型错误问题求助

我一眼就看到了几个关键问题，这就是你收到错误提示的原因，咱们一步步来修正：

核心错误点分析 #

1. TextInput的onChange用法完全错误
   你现在的回调里直接调用了setTimer(workTime)，这不仅会立刻触发状态更新，而且setTimer是没有返回值的（返回undefined），所以handleChange拿到的第二个参数是undefined，后续parseInt(undefined)自然会出问题。

2. TextInput的value类型不匹配
   React Native的TextInput组件要求value属性是字符串或undefined，但你传入的workTime是数字类型（比如初始的0.3），这直接触发了类型错误提示。

3. 状态更新的方式不够可靠
   你直接使用当前的timer状态来更新，当状态更新依赖于之前的状态时，最好用函数式更新，避免状态快照的问题。

修正后的代码 #

第一步：修复TextInput组件 #

把onChange换成onChangeText（React Native专门提供的，直接获取输入文本），同时把value转成字符串：

<TextInput 
  style={styles.input} 
  onChangeText={(text) => handleChange("work", text)} 
  placeholder="Work" 
  keyboardType="numeric" 
  value={workTime.toString()} 
  name="work" 
/>

（注意：你的break和longBreak对应的TextInput也要做同样的修改）

第二步：优化handleChange函数 #

处理空输入的情况（避免parseInt空字符串得到NaN），同时改用函数式更新：

function handleChange(name, value) {
  // 处理空输入，默认设为0，也可以根据需求调整
  const numValue = value ? parseInt(value, 10) : 0;
  console.log(numValue);
  
  switch (name) {
    case "work":
      setTimer(prevTimer => ({ ...prevTimer, work: numValue }));
      break;
    case "break":
      setTimer(prevTimer => ({ ...prevTimer, break: numValue }));
      break;
    case "longBreak":
      setTimer(prevTimer => ({ ...prevTimer, longBreak: numValue }));
      break;
    default:
      break;
  }
}

额外说明 #

• 如果一定要用onChange而不是onChangeText，可以这样写：

  onChange={(e) => handleChange("work", e.nativeEvent.text)}
  

• 如果你需要保留小数（比如初始的0.3是分钟？），可以把parseInt换成parseFloat，同时处理好输入的格式。

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