Можно ли передавать данные внутри функции asyn c вне класса, в котором она находится? - PullRequest
Новая
       17

Можно ли передавать данные внутри функции asyn c вне класса, в котором она находится?

0 голосов
/ 15 января 2020

Я использую Ioni c Реагируйте с конденсатором, чтобы попытаться извлечь геолокацию и затем попытаться сохранить ее в базе данных. Я пытаюсь сохранить значение в App.coordinate, но всякий раз, когда я пытаюсь экспортировать его в map.ts, оно сохраняет его в базе данных как неопределенное.

Есть ли способ передать данные геолокации из getCurrentPosition () функция для map.ts?

Как вы можете видеть, я пробовал множество способов передачи данных (как видно из переменных stati c координата / координата!).

App.tsx 

import * as React from 'react';
import { Plugins } from '@capacitor/core';
import { all } from '../server/db/maps';
const { Geolocation } = Plugins;

export class App extends React.Component<IAppProps, IAppState> {
    state: any = {};
    props: any = {};
    lat!: number;
    long!: number;
    static coordinate: string;
    coord!: string;

    constructor(props: any) {
        super(props);
        this.state = { maps: [] };
        this.getCurrentPosition();
    }

    async getCurrentPosition() {
        const position = await Geolocation.getCurrentPosition();
        this.lat = position.coords.latitude;
        this.long = position.coords.longitude;
        this.coord = "[" + this.long + ", " + this.lat + "]";
        App.coordinate = "[" + this.long + ", " + this.lat + "]";
        console.log('Current', App.coordinate);
    }

    async componentDidMount() {
        try {
            let r = await fetch('/api/maps');
            let maps = await r.json();
            this.setState({ maps });
        } catch (error) { console.log(error); }
    }

    render() {
        return (
            <main className="container my-5">
                <h1 className="text-primary text-center">Geolocation</h1>
                <ul className="list-group">
                    {this.state.maps.map(maps =>{ return <li className="list-group-item">{maps.id}, {maps.date}, {maps.coordinates} </li> })}
                </ul>
            </main>
        );
    }
}

export let Coordinates = App.coordinate; //App.coordinate passes on undefined
export interface IAppProps {}
export interface IAppState { maps: Array<{ id: string, date: Date, coordinates: string }>; }
export default App;

maps.ts 

import { Connection } from './index';
import { App, Coordinates } from '../../client/app';

export const all = async() => {
    return new Promise((resolve, reject) => {
        Connection.query('SELECT * FROM COORDINATES', (err, results) => {

            if(err){
                return reject(err);
            }
            resolve(results);
        });

        let stmt = 'INSERT INTO COORDINATES (id, date, coordinates) VALUES ? ';
        let todos = [['3343', '2020-01-09 22:00:00', '[44.44444, 55.55555]'],
                     ['5555', '2020-01-09 22:01:00', Coordinates]];
        Connection.query(stmt, [todos], (err, results, fields) => {
            if (err) {
              return console.error(err.message);
            }
            // get inserted rows
            console.log('Row inserted:' + results.affectedRows);
          });
    });
}

export default {
    all
}

1 Ответ

0 голосов
/ 15 января 2020

Как вы пытаетесь сделать, не будет работать

Почему?

Поскольку вам потребуется экземпляр Класс приложения для доступа к его «координате». Даже если вы используете переменную stati c, эта переменная заполняется только динамически, а не статически.

Как ее решить?

Вы будете решать только это проблема в динамическом вызове метода для хранения координат и отделения логики вставки c от логики списка c.

Посмотрите: 

export const all = async() => (
    new Promise((resolve, reject) =>
        Connection.query('SELECT * FROM COORDINATES', (err, results) => {
            if(err){
                return reject(err);
            }
            resolve(results);
        })
)

export const save = async (coordinates) => (
    new Promise((resolve, reject) => {
        // Make use of const variables as well
        const stmt = 'INSERT INTO COORDINATES (id, date, coordinates) VALUES ? ';
        const todos = [['3343', '2020-01-09 22:00:00', '[44.44444, 55.55555]'],
                     ['5555', '2020-01-09 22:01:00', coordinates]]; // dynamic variable, not static.
        Connection.query(stmt, [todos], (err, results, fields) => {
            if (err) {
              return console.error(err.message);
            }
            // get inserted rows
            console.log('Row inserted:' + results.affectedRows);
          });
    });
)

И затем вы будет вызывать его из приложения и, предпочтительно, на componentDidMount (потому что это асин c функция) 

async componentDidMount() {
    try {
        let r = await fetch('/api/maps');
        let maps = await r.json();
        this.setState({ maps });
        await this.getCurrentPosition()
        // ... call to server to save this.coord
    } catch (error) { console.log(error); }
}

async getCurrentPosition() {
    const position = await Geolocation.getCurrentPosition();
    this.lat = position.coords.latitude;
    this.long = position.coords.longitude;
    this.coord = "[" + this.long + ", " + this.lat + "]";
    console.log('this.coord', this.coord);
}
...