Получить переменную из службы Javascript - React Hooks - PullRequest
Новая
       15

Получить переменную из службы Javascript - React Hooks

0 голосов
/ 01 марта 2020

У меня есть элемент кнопки, который вызывает другой файл javascript в моей рабочей области. 

      <Button
        onClick={() =>
            SendRegister(
              {
                registrationType: 'email',
                latitude: 55,
                longitude: 100,
                distance: 100,
                email: 'email@testemail.com'
              }
            )
        }>
        Set Up Notifications
      </Button>

В другом файле javascript я записываю информацию, полученную в firebase: 

import React, { useState, useEffect } from "react";
import firebase from "./firebase";

    function SendRegister(props) {
      alert('in Send register');
      alert(JSON.stringify(props));
      var db = firebase.firestore();

      if (props.registrationType === 'email') {
        db.collection("emailAlerts")
          .add({
            email: props.email,
            latitude: props.latitude,
            longitude: props.longitude,
            distance: props.distance,
           status: "active"
          })
          .then(function(docRef) {
            return docRef.id;
          })
          .catch(function(error) {
            return("Error adding document: " + error);
          });
    }

    }

    export default SendRegister;

В firebase я вижу записи, успешно записываемые, однако я не уверен, как чтобы получить возвращаемые функции обратно в скрипт, где я вызвал onClick.

Я попытался обернуть функцию SendRegister в useState константу, например setStatus(SendRegister..., для захвата возврата, но я получил undefined обратно в возвращении. Я посмотрел и поднял состояние, которое имеет смысл для элемента / компонента, но не уверен, как это вписывается в такую ​​функцию, как SendRegister. Я считаю, что избыточность и useContext - это вариант, но я хочу убедиться, что не существует более простого способа передачи переменных с одной страницы на другую, который я не рассматриваю.

Ответы [ 2 ]

1 голос
/ 01 марта 2020

Я предполагаю, что вы пытаетесь получить возвращаемое значение docRef.id в родительском компоненте. Поскольку операция внутри SendRegister является асинхронной, вы должны вернуть обещание из SendRegister, которое родительский компонент может прослушивать. 

export default class componentName extends Component {

  async handleSendRegister(params){
    try {
      const docRefId = await SendRegister(params)

      // docRefId is now available here
    } catch (error) {
      console.log(error)
    }
  }

  render() {
    return (
      <Button
        onClick={() =>
          this.handleSendRegister(
            {
              registrationType: 'email',
              latitude: 55,
              longitude: 100,
              distance: 100,
              email: 'email@testemail.com'
            }
        )
    }>
    Set Up Notifications
  </Button>
    )
  }
}

и SendRegister должны быть простой asyn c функцией. 

async function SendRegister(props) {
  try {
    if (props.registrationType === 'email') {

      const docRef = await db.collection("emailAlerts")
      .add({
        email: props.email,
        latitude: props.latitude,
        longitude: props.longitude,
        distance: props.distance,
       status: "active"
      })

      return docRef.id
    }

   } catch (error) {
      throw Error(error.message)
  }

}

export default SendRegister;
0 голосов
/ 01 марта 2020

Вы можете передать метод обратного вызова в обработчике onClick, например: 

SendRegister(
          {
            registrationType: 'email',
            latitude: 55,
            longitude: 100,
            distance: 100,
            email: 'email@testemail.com',
            callback: ()=>{// code to executed on promise resolve}
          }

И вы можете вызвать эту функцию внутри обещания .then (), так как он будет частью props.

...