从服务Javascript接收变量-React钩子

我有一个按钮元素，它调用工作区中的另一个javascript文件

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

在firebase中，我看到记录成功写入，但是我不确定如何将函数的返回传递回调用onClick的脚本

---

我已尝试将SendRegister函数包装在useState常量中，例如setStatusSendRegister。。。捕获返回，但我在返回中收到一个未定义的返回。我也查看了提升状态，这对于元素/组件来说是有意义的，但不确定它如何适合像SendRegister这样的函数。我相信redux和useContext是一种选择，但我想确保没有一种更简单的方法可以将变量从一个页面传递到另一个页面，而我没有考虑这种方法

您可以在onClick处理程序上传递回调方法，如：

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

---

您可以在promise内调用此函数。然后，因为它将成为props的一部分。

我假设您正在尝试获取父组件中的返回值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>
    )
  }
}

---

谢谢我选择了您的答案，但我必须修改它，以使用功能组件和主要组件的挂钩。如果您可以更新答案以在钩子中包含上述内容，那么唯一真正的更改是功能组件中的async HandlerRegister必须是async function HandlerRegister。

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>
    )
  }
}

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;