React.js 在按钮按下时显示输出

Question

我有一个应用程序可以计算一个坐标到另一个坐标之间的行进距离和方位角。我想要在 onPress 上显示按钮下方的距离和方位。我已经尝试了一段时间，无法弄清楚如何提供输出。我有导出到控制显示的 app.js 的计算类。

按下计算后，唯一的输出是： Bearing: NaN。

在输入框和按钮下面应该打印的是：

Distance: (distance)km
Bearing: (bearing)

非常感谢任何指导。

计算.js

import React, { useState} from 'react';
import {StyleSheet, Text, View, TextInput} from 'react-native';
import {Button} from 'react-native-elements';
import {computeDistance, computeBearing} from './Calculations';

const Calculate = ({buttonTitle, lat1, lon1, lat2,lon2, distance, bearing}) => {
    const [state, setState] = useState({lat1: '', lon1: '', lat2: '', lon2: '', distance: '', bearing: ''});

    const updateStateObject = (vals) =>{
        setState({
            ...state,
            ...vals,
        });
    };
    return (
        <View style={styles.container}>
            <TextInput 
                placeholder = 'Starting latitude' 
                onChangeText = {(lat1) => updateStateObject({lat1: lat1})} //or you could do (val) => {setName(val);}
                value = {state.lat1}/>
            <TextInput 
                placeholder = 'Starting longitude' 
                onChangeText = {(lon1) => updateStateObject({lon1: lon1})} //or you could do (val) => {setName(val);}
                value = {state.lon1}/>
            <TextInput 
                placeholder = 'Ending latitude' 
                onChangeText = {(lat2) => updateStateObject({lat2: lat2})} //or you could do (val) => {setName(val);}
                value = {state.lat2}/>
            <TextInput 
                placeholder = 'Ending longitude' 
                onChangeText = {(lon2) => updateStateObject({lon2: lon2})} //or you could do (val) => {setName(val);}
                value = {state.lon2}/>
            <Button 
            title= {buttonTitle}
            onPress = {() =>{
               state.distance = computeDistance({lat1: lat1}, {lon1: lon1}, {lat2: lat2}, {lon2: lon2});
               state.bearing = computeBearing({lat1: lat1}, {lon1: lon1}, {lat2: lat2}, {lon2: lon2})
                updateStateObject({distance: `Distance: ${state.distance}`});
                updateStateObject({bearing: `Bearing: ${state.bearing}`});
            }} />
            <Text> {state.distance}</Text>
            <Text> {state.bearing}</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
export default Calculate;

Calculations.js

 // Converts from degrees to radians.
 function toRadians(degrees) {
    return (degrees * Math.PI) / 180;
  }

  // Converts from radians to degrees.
  function toDegrees(radians) {
    return (radians * 180) / Math.PI;
  }

  // Computes distance between two geo coordinates in kilometers.
  export function computeDistance(lat1, lon1, lat2, lon2) {
    console.log(`p1={${lat1},${lon1}} p2={${lat2},${lon2}}`);
    var R = 6371; // km (change this constant to get miles)
    var dLat = ((lat2 - lat1) * Math.PI) / 180;
    var dLon = ((lon2 - lon1) * Math.PI) / 180;
    var a =
      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.cos((lat1 * Math.PI) / 180) *
        Math.cos((lat2 * Math.PI) / 180) *
        Math.sin(dLon / 2) *
        Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;
    return `${round(d, 3)} km`;
  }

  // Computes bearing between two geo coordinates in degrees.
 export function computeBearing(startLat, startLng, destLat, destLng) {
    startLat = toRadians(startLat);
    startLng = toRadians(startLng);
    destLat = toRadians(destLat);
    destLng = toRadians(destLng);

    var y = Math.sin(destLng - startLng) * Math.cos(destLat);
    var x =
      Math.cos(startLat) * Math.sin(destLat) -
      Math.sin(startLat) * Math.cos(destLat) * Math.cos(destLng - startLng);
    var brng = Math.atan2(y, x);
    brng = toDegrees(brng);
    return (brng + 360) % 360;
  }

  function round(value, decimals) {
    return Number(Math.round(value + "e" + decimals) + "e-" + decimals);
  }

编辑：更新了 Calculate.js 并添加了 Calculations.js

同样的问题仍然存在。

Answer 1

我认为在您的 Calculate 组件中，您正在将对象传递给您的函数 但是在Calculations.js 中，您的函数需要的变量是简单值而不是对象。 另一件事是您以对象形式传递的值是您以props 获得的值，而不是您在state 中设置的值，您应该使用state.lat1 等。

在您的函数调用中，您应该更改传递给该函数的参数

state.distance = computeDistance(state.lat1, state.lon1,state.lat2, state.lon2);

与其他函数调用相同

state.bearing = computeBearing(state.lat1, state.lon1, state.lat2, state.lon2);

在Calculation.js 中的round 函数中，您正在用字符串污染数字，这将再次导致NaN（因为最终值将是一个字符串）。

Number(Math.round(value + "e" + decimals) + "e-" + decimals);