React Native开发求助：如何基于双输入从大表格取值计算驻车制动力

直接把表格数据转换成JavaScript结构化数据（嵌套对象或二维数组），就能通过输入的重量和坡度快速定位对应制动力，彻底规避大量条件判断或复杂数据库操作。

步骤1：转换表格为结构化数据 #

把两张表格的内容分别整理成嵌套对象（或二维数组），用坡度作为外层键、重量作为内层键，对应值就是制动力。以下是简化示例（你需要根据实际表格完整填充数据）：

// 表格1的结构化数据
const brakeTable1 = {
  "0.5%": {
    "100t": 12,
    "200t": 24,
    "300t": 36
    // 补充其他重量对应的数值
  },
  "1%": {
    "100t": 24,
    "200t": 48,
    "300t": 72
    // 补充其他重量对应的数值
  },
  // 补充其他坡度行的数据
};

// 表格2的结构化数据（同理填充）
const brakeTable2 = {
  "2%": {
    "100t": 48,
    "200t": 96
    // ...
  }
};

如果坡度和重量是纯数值，也可以用二维数组+索引映射优化：

// 先定义坡度、重量的顺序列表，用来对应数组索引
const slopeList = [0.5, 1, 1.5, 2];
const weightList = [100, 200, 300, 400];

// 二维数组：行对应坡度，列对应重量
const brakeTableNumeric = [
  [12, 24, 36, 48],   // 0.5%坡度的各重量数值
  [24, 48, 72, 96],   // 1%坡度的各重量数值
  [36, 72, 108, 144], // 1.5%坡度的各重量数值
  // ...
];

步骤2：实现查表函数 #

根据用户输入的重量和坡度，直接从结构化数据中取值：

字符串键版本 #

function getBrakeForce(table, weight, slope) {
  // 统一输入格式，确保和数据键匹配
  const formattedWeight = `${weight}t`;
  const formattedSlope = `${slope}%`;
  
  // 校验数据存在性，避免报错
  if (table[formattedSlope] && table[formattedSlope][formattedWeight]) {
    return table[formattedSlope][formattedWeight];
  }
  return "无匹配数据";
}

// 使用示例
const result = getBrakeForce(brakeTable1, 200, 1); // 返回48

数值索引版本 #

function getBrakeForceNumeric(table, weight, slope) {
  const slopeIndex = slopeList.indexOf(slope);
  const weightIndex = weightList.indexOf(weight);
  
  if (slopeIndex !== -1 && weightIndex !== -1) {
    return table[slopeIndex][weightIndex];
  }
  return "无匹配数据";
}

// 使用示例
const result = getBrakeForceNumeric(brakeTableNumeric, 200, 1); // 返回48

步骤3：React Native组件集成 #

把查表逻辑封装成工具函数，在组件中接收用户输入并展示结果：

import React, { useState } from 'react';
import { View, TextInput, Text, Button, StyleSheet } from 'react-native';
import { brakeTable1, getBrakeForce } from './brakeUtils';

export default function BrakeCalculator() {
  const [weight, setWeight] = useState('');
  const [slope, setSlope] = useState('');
  const [result, setResult] = useState('');

  const handleCalculate = () => {
    const numWeight = parseInt(weight);
    const numSlope = parseFloat(slope);
    
    if (isNaN(numWeight) || isNaN(numSlope)) {
      setResult("请输入有效数值");
      return;
    }
    
    const force = getBrakeForce(brakeTable1, numWeight, numSlope);
    setResult(`所需制动力：${force}`);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="火车重量（吨）"
        keyboardType="numeric"
        value={weight}
        onChangeText={setWeight}
      />
      <TextInput
        style={styles.input}
        placeholder="坡度（%）"
        keyboardType="numeric"
        value={slope}
        onChangeText={setSlope}
      />
      <Button title="计算制动力" onPress={handleCalculate} />
      {result && <Text style={styles.result}>{result}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, gap: 15 },
  input: { borderBottomWidth: 1, paddingVertical: 8, fontSize: 16 },
  result: { marginTop: 20, fontSize: 18, textAlign: 'center' }
});

方案优势 #

• 代码简洁：数据与逻辑分离，维护时只需修改结构化数据，无需改动查找逻辑
• 性能高效：直接键/索引查找，时间复杂度O(1)
• 易扩展：新增表格或修改数据仅需更新对应对象/数组

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