React.js 類型錯誤：模塊不是 function

Question

希望這是一個簡單的解決方法，我只是盲目的。 我正在構建一個地理計算器，我們使用緯度和經度確定行駛距離。 長話短說，我們已經為我們提供了數學函數，我們將圍繞它構建應用程序。

正如標題所述，一旦輸入數據並按下按鈕並在第 36 行失敗，我就會收到 TypeError。

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

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

    const updateStateObject = (vals) =>{
        setState({
            ...state,
            ...vals,
        });
    };
    return (
        <View style={styles.container}>
            <TextInput 
                placeholder = 'Enter the latitude of your starting location.' 
                onChangeText = {(lat1) => updateStateObject({coordinate: lat1})} //or you could do (val) => {setName(val);}
                value = {state.lat1}/>
            <TextInput 
                placeholder = 'Enter the longitude of your starting location.' 
                onChangeText = {(lon1) => updateStateObject({coordinate: lon1})} //or you could do (val) => {setName(val);}
                value = {state.lon1}/>
            <TextInput 
                placeholder = 'Enter the latitude of your end location.' 
                onChangeText = {(lat2) => updateStateObject({coordinate: lat2})} //or you could do (val) => {setName(val);}
                value = {state.lat2}/>
            <TextInput 
                placeholder = 'Enter the longitude of your end location.' 
                onChangeText = {(lon2) => updateStateObject({coordinate: lon2})} //or you could do (val) => {setName(val);}
                value = {state.lon2}/>
            <Button 
            title= {buttonTitle}
            onPress = {() =>{
                dist = Calculations.computeDistance({coordinate: lat1}, {coordinate: lon1}, {coordinate: lat2}, {coordinate: lon2});
                bear = Calculations.computeBearing({coordinate: lat1}, {coordinate: lon1}, {coordinate: lat2}, {coordinate: lon2});
                updateStateObject({distance: `Distance: ${dist}`});
                updateStateObject({bearing: `Bearing: ${bear}`});
            }} />
        </View>
    );
};

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

一旦調用了computeDistance，它就表明應用程序失敗，我將假設計算軸承也將在應用程序的當前state 處失敗。 我從一個名為 Calculations 的組件文件中導入，函數如下所示：

const Calculations = () =>{
...
  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`;
  }
...
}

export default Calculations;

我對 JS 很陌生，尤其是對 React.js 很陌生。 任何指導將不勝感激！

編輯：這是我收到的錯誤 TypeError: _Calculations__WEBPACK_IMPORTED_MODULE_8__.default.computeDistance is not a function

Answer 1

您將計算聲明為 function 並且您無法訪問其中的任何內容。 如果您想調用代碼中的 function，您可以對計算執行以下操作：

const Calculations = () =>{
  ...
}

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`;
}

Calculations.computeDistance = computeDistance;

export default Calculations;

Answer 2

感謝大家的幫助。 我最終做的基本上是完全擺脫了作為 function 的計算，並在頁面上單獨擁有這些功能。 然后導出我需要計算的每個 function 使用單獨導入它們

import {computeDistance, computeBearing} from './Calculations';

建議的其他方法對幫助我思考和簡化代碼非常有幫助！

Answer 3

似乎您以錯誤的方式導入了Calculations 。

你應該這樣做： import { Calculations} from './Calculations';

通過導入帶括號的Calculations ，React 會知道你使用的是 function 而不是整個東西。 這樣就可以把function導出了。