React Native中获取API数据后如何应用条件判断及相关逻辑？

完整修改后的代码 #

import { StyleSheet, Text, View, ActivityIndicator, TouchableOpacity, Alert } from 'react-native'
import React, { useState } from 'react'
import { auth, database } from '../config/firebase';
import { collection, doc, setDoc } from 'firebase/firestore';

const url = "your-api-url";
// 定义阈值，可根据实际需求调整
const ALCOHOL_THRESHOLD = 250;
const TEMPERATURE_THRESHOLD = 37.5;

function AlcoTestButton(){
  const [isLoading, setLoading] = useState(false);
  const [alcohol, setAlcohol] = useState(null);
  const [temperature, setTemperature] = useState(null);
  const [testResult, setTestResult] = useState(null);

  const fetchData = async () => {
    setLoading(true);
    // 保留模拟延迟，实际项目可移除
    setTimeout(async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        
        const currentAlcohol = json.alcohol;
        const currentTemp = json.temperature;
        
        setAlcohol(currentAlcohol);
        setTemperature(currentTemp);

        // 判断测试结果
        const isAlcoholOk = currentAlcohol <= ALCOHOL_THRESHOLD;
        const isTempOk = currentTemp <= TEMPERATURE_THRESHOLD;
        const result = isAlcoholOk && isTempOk ? "success" : "fail";
        setTestResult(result);

        // 存储到Firestore，包含测试结果与时间戳
        const sensorDoc = doc(collection(database, 'sensors'));
        await setDoc(sensorDoc, {
          uid: auth?.currentUser?.uid,
          alcohol: currentAlcohol,
          temperature: currentTemp,
          testResult: result,
          timestamp: new Date()
        });

      } catch (error) {
        Alert.alert("错误", "获取数据失败：" + error.message);
      } finally {
        setLoading(false);
      }
    }, 5000);  
  }

  // 渲染状态图标：对勾/叉号
  const renderStatusIcon = (isValid) => {
    return isValid ? <Text style={styles.passIcon}>✓</Text> : <Text style={styles.failIcon}>✗</Text>;
  }

  return (
    <View style={styles.container}>
      <TouchableOpacity 
        onPress={fetchData}
        style={styles.button}>
          <Text style={{ color: "white"}}>Take Test</Text>
      </TouchableOpacity>
      
      {isLoading && <ActivityIndicator size="large" color="#0000ff" />}
      
      {!isLoading && alcohol !== null && temperature !== null && (
        <View style={styles.resultContainer}>
          <View style={styles.row}>
            <Text>酒精值: {alcohol}</Text>
            {renderStatusIcon(alcohol <= ALCOHOL_THRESHOLD)}
          </View>
          <View style={styles.row}>
            <Text>体温: {temperature}°C</Text>
            {renderStatusIcon(temperature <= TEMPERATURE_THRESHOLD)}
          </View>
          <Text style={[styles.resultText, {color: testResult === "success" ? '#34C759' : '#FF3B30'}]}>
            测试结果: {testResult === "success" ? "合格" : "不合格"}
          </Text>
        </View>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    gap: 20,
    padding: 20
  },
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 30,
    paddingVertical: 15,
    borderRadius: 8
  },
  resultContainer: {
    gap: 10,
    alignItems: 'flex-start',
    marginTop: 10
  },
  row: {
    flexDirection: 'row',
    gap: 10,
    alignItems: 'center'
  },
  passIcon: {
    color: '#34C759',
    fontSize: 20,
    fontWeight: 'bold'
  },
  failIcon: {
    color: '#FF3B30',
    fontSize: 20,
    fontWeight: 'bold'
  },
  resultText: {
    marginTop: 10,
    fontSize: 16,
    fontWeight: '600'
  }
});

export default AlcoTestButton;

关键修改说明 #

1. 修正执行时机问题

• 移除原onPress中fetchData() && checkToxic()的错误写法，直接绑定fetchData为点击事件
• 将阈值判断、结果存储逻辑整合到fetchData内部，确保API数据返回后再执行后续操作，避免状态未更新导致的判断失效

2. 实现阈值判断与状态展示

• 定义全局阈值常量，便于后续调整维护
• 添加renderStatusIcon函数，根据数值是否达标返回对应图标
• 在结果展示区为酒精值和体温分别绑定状态图标，同步显示判断结果

3. 测试结果存储到Firestore

• 计算测试结果：酒精值和体温均低于阈值则为success，否则为fail
• 将测试结果、时间戳与原始数据一同写入Firestore，便于后续追溯记录
• 使用async/await优化异步代码，提升可读性与稳定性

其他优化

• 修正Alert导入来源，改为react-native原生组件
• 初始化状态为null，避免初始值异常导致的判断问题
• 添加基础样式，优化界面排版与视觉反馈

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