Question

我正在尝试弄清如何从react组件中调用firebase函数。

反应成分...

import React from 'react';
import './App.css';
import functions from '../functions/index'

function App() {

    const callFirebaseFunction = event =>{
        var output = functions.returnMessage()
        console.log(output)
    }

    return(
        <div>
            <button onClick={event => callFirebaseFunction()}>call function button</button>
        </div>    
    )

firebase函数index.js ...

const functions = require('firebase-functions');

exports.returnMessage = functions.https.onCall((data, context) => {
    return {
        output: "the firebase function has been run"
      }
});

希望我的代码解释了我正在尝试做的事情。可以更正我在这个非常简单的示例中犯的任何其他错误。

我遇到的问题是，我无法将任何内容导入到src文件夹之外的组件，并且firebase函数不在此范围内。我真的不想弹出任何东西，因为我假设我有访问我的Firebase函数的正确方法，而我根本找不到它。

Answer 1

对于每个the documentation，您需要使用客户端中的firebase库来调用可调用函数。您不应该导入服务器端函数代码，而需要自己deployed to firebase functions-不能在应用程序的客户端中重复使用。

假设您正确使用了imported the firebase client SDK into your client code，这意味着我们可以像这样修改name：

callFirebaseFunction

Answer 2

我刚刚将Firebase从 ^ 4.8.0更新为^ 7.21.0

现在我可以使用 httpsCallable

如何从React组件中调用Firebase函数

2 个答案: