React Native: Importieren einer Komponente in ComponentWillMount

Question

Ich muss eine Funktion in ComponentWillMount aufrufen, aber ich möchte nicht in der gleichen Datei sitzen.

Gibt es eine Möglichkeit, die Funktion in componentWillMount zu referenzieren?

Hier ist der Code, ich habe viel von dem Code aufgehört, die für dieses Problem nicht relevant ist, wie ich in der Mitte des Refactoring bin (also diese Frage!):

Midpoint.js:

import React, { Component } from 'react'; 

class Midpoint extends Component { 

    midpoint(lat1, lng1, lat2, lng2) { 
    const rad = (Math.PI)/180; 
    const rlat1 = lat1 * rad; 
    const rlng1 = lng1 * rad; 
    const rlat2 = lat2 * rad; 
    const rlng2 = lng2 * rad; 

    const dlng = rlng2 - rlng1; 
    const Bx = Math.cos(rlat2) * Math.cos(dlng); 
    const By = Math.cos(rlat2) * Math.sin(dlng); 

    const lat3 = Math.atan2(Math.sin(rlat1) + Math.sin(rlat2), 
       Math.sqrt(((Math.cos(rlat1) + Bx) * (Math.cos(rlat1) + Bx)) + (By * By))); 
    const lng3 = rlng1 + Math.atan2(By, (Math.cos(rlat1) + Bx)); 

    const lat = (lat3 * 180)/Math.PI; 
    const lng = (lng3 * 180)/Math.PI; 
    this.setState({ lat2: lat, lng2: lng }); 
    } 
} 

export default Midpoint; 

Dies ist die Funktion, die ich in den folgenden importieren möchten:

ResultsPage.js:

import React, { Component } from 'react'; 
import { View, Text, StyleSheet } from 'react-native'; 
import getDirections from 'react-native-google-maps-directions'; 
import axios from 'axios'; 
import Midpoint from './Midpoint'; 
import { Card, CardSection, Button } from './common'; 

class ResultsPage extends Component { 
    state = {} 

    componentWillMount() { 
.then(response => { Midpoint.midpoint(this.state.p1Latitude, this.state.p1Longitude, this.state.p2Latitude, this.state.p2Longitude) }) 

} 

Der Fehler, den ich erhalten ist _Midpoint2.default.midpoint is not a function

Answer 1

Sie versuchen, eine Komponente zu nennen, wie es war eine Funktion ist, wenn das einzige Ziel der Midpoint ist die latlng dann berechnen don`t es Component macht eine Reaktion nur die Funktion exportieren

export default function calculateMidpoint(lat1, lng1, lat2, lng2) { 
    const rad = (Math.PI)/180; 
    const rlat1 = lat1 * rad; 
    const rlng1 = lng1 * rad; 
    const rlat2 = lat2 * rad; 
    const rlng2 = lng2 * rad; 

    const dlng = rlng2 - rlng1; 
    const Bx = Math.cos(rlat2) * Math.cos(dlng); 
    const By = Math.cos(rlat2) * Math.sin(dlng); 

    const lat3 = Math.atan2(Math.sin(rlat1) + Math.sin(rlat2), 
       Math.sqrt(((Math.cos(rlat1) + Bx) * (Math.cos(rlat1) + Bx)) + (By * By))); 
    const lng3 = rlng1 + Math.atan2(By, (Math.cos(rlat1) + Bx)); 

    const lat = (lat3 * 180)/Math.PI; 
    const lng = (lng3 * 180)/Math.PI; 
    return { lat, lng } 
    } 

aber wenn Midpoint die Logik sein muss extrahiert eine Komponente, so wie wir im letzten Beispiel haben und es in einer diferent Datei setzen und es in den Ergebnissen und Midpoint Komponenten ruft

Lassen Sie sagen, Sie das setzen Funktion in Utils.js im selben Verzeichnis

ResultsPage.js

import React, { Component } from 'react'; 
import { View, Text, StyleSheet } from 'react-native'; 
import getDirections from 'react-native-google-maps-directions'; 
import axios from 'axios'; 
import calculateMidpoint from './Utils'; 
import { Card, CardSection, Button } from './common'; 

class ResultsPage extends Component { 
    state = {} 

    componentWillMount() { 
let latlng = calculateMidpoint(this.state.p1Latitude, this.state.p1Longitude, this.state.p2Latitude, this.state.p2Longitude) 

} 

und Midpoint.js

import React, { Component } from 'react'; 
import calculateMidpoint from './Utils'; 
class Midpoint extends Component { 

    midpoint(lat1, lng1, lat2, lng2) { 
    let latlng = calculateMidpoint(lat1, lng1, lat2, lng2) 
    this.setState({ lat2: latlng.lat, lng2: latlng,lng }); 
    } 
} 

export default Midpoint; 

auch, haben Sie einen Fehler in componentWillMount, wo Sie eine .then anrufen() aus dem Nichts