组件控制台持续报错：受控/非受控输入切换问题求助

问题分析 #

你遇到的报错是因为组件生命周期内，输入框的value属性出现了从undefined（非受控）到有定义值（受控）的切换，或是因无效值导致组件内部状态异常。结合代码来看，核心问题在于：当输入非数字内容时，parseFloat会返回NaN，此时totalKm变为NaN，其toString()结果为"NaN"，部分TextInput组件会将这种异常值视为非受控状态，后续输入有效内容时又切换回受控，触发报错。

修复方案 #

方案1：确保状态始终为有效数字

修改onChangeText逻辑，过滤无效输入并避免NaN：

const [totalKm, setTotalKm] = useState<number>(0);
<TextInput
  style={{borderRadius: 10, textAlign: 'center', height: 50, width: 200}}
  mode="outlined"
  placeholder='Toplam Km'
  inputMode='decimal'
  value={totalKm.toString()}
  onChangeText={(text) => {
    // 清理输入：仅保留数字、逗号和点
    const cleanedText = text.replace(/[^0-9.,]/g, '');
    // 统一替换逗号为点
    const normalizedText = cleanedText.replace(',', '.');
    // 解析数字，空值或无效值设为0
    const num = normalizedText ? parseFloat(normalizedText) : 0;
    setTotalKm(isNaN(num) ? 0 : num);
  }}
/>

方案2：使用字符串类型管理状态

将状态改为字符串类型，与TextInput的value类型匹配，避免类型转换的潜在问题：

const [totalKm, setTotalKm] = useState<string>("0");
<TextInput
  style={{borderRadius: 10, textAlign: 'center', height: 50, width: 200}}
  mode="outlined"
  placeholder='Toplam Km'
  inputMode='decimal'
  value={totalKm}
  onChangeText={(text) => {
    // 清理输入并统一格式
    const cleaned = text.replace(',', '.').replace(/[^0-9.]/g, '');
    // 避免多个小数点
    const parts = cleaned.split('.');
    const normalized = parts.length > 2 ? `${parts[0]}.${parts.slice(1).join('')}` : cleaned;
    // 空值时设为"0"
    setTotalKm(normalized || "0");
  }}
/>

关键说明 #

• 始终保证value属性有明确的有效值，避免undefined或NaN这类异常值
• 输入处理时过滤无效字符，确保状态更新后的值符合组件预期的类型和格式

内容的提问来源于stack exchange，提问作者Mert Mesut Demir