React Native中数字大小判断if语句异常问题求助

问题根源 #

你代码里的核心问题是TextInput的输入值默认是字符串类型，直接用字符串做大小比较会和数字比较逻辑不符。比如输入num1="10"、num2="2"时，字符串比较会判定"10" < "2"（因为字符'1'的ASCII码小于'2'），但实际数字比较10是大于2的，这就导致你的判断逻辑多数时候出错。

修复步骤 #

1. 输入值类型转换：在更新num1和num2的state时，把输入的字符串转为数字类型。
2. 函数内双重校验：在subtractSmallerNumber函数里，先确保比较的是数字，避免意外的字符串残留。

完整修复代码示例 #

import React, { Component } from 'react';
import { View, Text, TextInput, TouchableHighlight, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default class App extends Component {
  state = {
    num1: 0,
    num2: 0,
    num3: 0,
    message: ' ',
  };

  // 处理num1输入，转为数字
  handleNum1Change = (text) => {
    this.setState({ num1: Number(text) || 0 });
  };

  // 处理num2输入，转为数字
  handleNum2Change = (text) => {
    this.setState({ num2: Number(text) || 0 });
  };

  subtractSmallerNumber = () => {
    // 取出数字，再次确保类型正确
    const num1 = Number(this.state.num1);
    const num2 = Number(this.state.num2);
    
    if (num1 > num2) {
      this.setState({ 
        num3: num1 - num2,
        message: 'num1 is bigger',
      });
    } else {
      this.setState({ 
        num3: num2 - num1,
        message: 'num2 is bigger',
      });
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          onChangeText={this.handleNum1Change}
          value={String(this.state.num1)}
        />
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          onChangeText={this.handleNum2Change}
          value={String(this.state.num2)}
        />
        <TouchableHighlight style={styles.button} onPress={this.subtractSmallerNumber}>
          <Text>计算差值</Text>
        </TouchableHighlight>
        <Text>{this.state.message}</Text>
        <Text>差值: {this.state.num3}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    paddingHorizontal: 20,
    justifyContent: 'center',
  },
  input: {
    height: 40,
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  button: {
    backgroundColor: '#ccc',
    padding: 10,
    alignItems: 'center',
    marginBottom: 10,
  },
});

新手排查小技巧 #

遇到这类逻辑异常时，可以在函数里打印变量的类型和值，快速定位问题：

subtractSmallerNumber = () => {
  console.log(typeof this.state.num1, this.state.num1); // 查看类型和值
  // ... 原有逻辑
}

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