React Native单个TouchableOpacity按钮实现多功能问题求助

你的代码核心问题有两个：

1. 逻辑顺序错误：先计算BMI再做输入验证，空值会导致计算出NaN，后续判断逻辑完全混乱。
2. setState异步特性未处理：直接在setState后调用页面导航，此时state还未更新，传递的参数是旧值。

另外输入验证的条件可以简化，无需写全所有组合情况。

修正后的代码 #

calc = () => {
  const { weight, height, age } = this.state;
  
  // 先做输入验证：检查所有必填字段是否为空
  if (!weight || !height || !age) {
    let message = '';
    const missingFields = [];
    if (!weight) missingFields.push('Weight');
    if (!height) missingFields.push('Height');
    if (!age) missingFields.push('Age');
    
    message = `Please enter your ${missingFields.join(', ')}.`;
    alert(message);
    return; // 验证不通过，直接终止函数
  }

  // 验证通过，计算BMI
  const w = parseFloat(weight);
  const h = parseFloat(height);
  const r = parseInt((w / (h * h)) * 10000);
  
  // 判断BMI结果
  let answer = '';
  if (r < 18) {
    answer = 'You are Underweight!';
  } else if (r >= 18 && r <= 25) {
    answer = 'You are Normal!';
  } else {
    answer = 'You are Overweight!';
  }

  // 更新state，在回调中执行导航（确保state已更新）
  this.setState({ result: r, answer }, () => {
    this.props.navigation.navigate('BMI5', {
      greet: this.state.result,
      ans: this.state.answer,
      ag: this.state.age,
      wt: this.state.weight,
      ht: this.state.height
    });
  });
};

关键修改点说明 #

• 先验证后计算：先检查所有输入字段是否为空，验证不通过直接终止函数，避免无效计算。
• 简化验证逻辑：通过数组收集缺失字段，动态生成提示信息，减少冗余代码。
• 处理setState异步：使用setState的第二个回调参数，确保state更新完成后再执行页面导航，保证传递的参数是最新值。
• 类型转换：将输入的字符串转为数字类型，避免计算时出现字符串拼接错误。

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