React Native TextInput使用parseInt后遇NaN及前期undefined报错问题咨询

我来帮你梳理并解决这个问题！你遇到的两个问题其实都是状态初始化和输入值转换时的细节没处理好，咱们一步步来搞定：

先分析你遇到的两个错误原因 #

1. undefined is not an object (evaluating 'this.state.keys.toString')
   这个报错说明你调用toString()的那个状态变量（比如this.state.keys）根本不存在，要么是你状态里的变量名写错了（比如实际定义的是keyInt不是keys），要么是这个状态变量初始化时没赋值，是undefined——对undefined调用toString()肯定会报错。

2. 移除this后出现NaN
   你应该是直接把输入的字符串转成数字，但没处理非数字输入的情况：比如用户输入字母、符号，或者清空输入框时，parseInt()会返回NaN，把NaN存到状态里后，再转字符串就会显示"NaN"。

正确的实现方案 #

下面给你一个完整的示例，兼顾状态初始化、安全转字符串、避免NaN的处理：

import React, { Component } from 'react';
import { TextInput } from 'react-native';

class NumericTextInput extends Component {
  constructor(props) {
    super(props);
    // 核心：给数值状态一个初始有效值，不能是undefined！
    this.state = {
      keyInt: 0 // 可以根据需求改成其他初始数字，比如100
    };
  }

  handleInputChange = (inputText) => {
    // 1. 处理空输入：用户清空输入框时，设为0（也可以根据需求调整）
    if (inputText === '') {
      this.setState({ keyInt: 0 });
      return;
    }

    // 2. 把输入字符串转成整数，指定进制为10避免意外
    const parsedNumber = parseInt(inputText, 10);

    // 3. 避免NaN：如果转出来不是有效数字，保留当前状态值
    const finalNumber = isNaN(parsedNumber) ? this.state.keyInt : parsedNumber;

    this.setState({ keyInt: finalNumber });
  };

  render() {
    // 用String()转字符串比toString()更安全：即使状态意外是undefined，也不会直接报错
    return (
      <TextInput
        value={String(this.state.keyInt)}
        onChangeText={this.handleInputChange}
        // 可选：设置数字键盘，从源头减少非数字输入
        keyboardType="numeric"
      />
    );
  }
}

export default NumericTextInput;

关键细节说明 #

• 状态初始化：必须给数值状态（keyInt）一个有效的初始数字，不能留空或设为undefined，这是避免第一个报错的核心。
• 安全转字符串：用String(this.state.keyInt)代替this.state.keyInt.toString()——如果状态值不小心变成undefined，String()会返回"undefined"而不是直接抛出错误，容错性更强。
• 输入值处理：一定要判断转数字后的结果是否为NaN，如果是就保留之前的状态值，避免把NaN存到状态里导致显示异常；同时处理空输入的场景，避免出现奇怪的显示。
• 可选优化：设置keyboardType="numeric"让用户只能调出数字键盘，减少非数字输入的概率，从源头降低出现NaN的可能。

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