Question

我有一个简单的React应用程序，可以使用Facebook登录并将详细信息保存到Firebase数据库中。

我该怎么做才能隐藏Facebook按钮并显示一条短信，提示已登录？

function App() {

const responseFacebook = (response) => {
    const payload = {
        id: response.id,
        name: response.name,
        email: response.email,
        token: response.accessToken,
        picture: response.picture

    }

    writeUserData(response.id, response.name, response.email)

};

function writeUserData(id, name, email) {
    fire.database().ref('usersUsername/' + name).set({
        fbID: id,
        name: name,
        refDJ: "none",
        email: email
    }, function(error) {
        if (error) {
            // The write failed...
        } else {
            // Data saved successfully!

            // Change Button to Text Coming soon to IOS



        }
    });
}

return (
<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
        <FacebookLogin
            //autoLoad={true}
            appId="2009920755111111" //APP ID NOT CREATED YET
            fields="name,email,picture"
            callback={responseFacebook}
            textButton = "Join with Facebook"
            icon="fa-facebook"
        />
    </p>

  </header>
</div>

）; }

导出默认应用程序；

Answer 1

您需要使用React hooks保存应用程序的状态。您需要状态来告知用户是否已登录，并根据该状态显示按钮或文本。

首先，您需要声明所需的变量类型loggedIn和初始值false：

const [loggedIn, setLoggedIn] = useState(false);

然后，您可以使用loggedIn状态来确定要呈现的内容，并在用户登录时对其进行更新。

此处显示完整代码：

function App() {
    const [loggedIn, setLoggedIn] = useState(false);

    const responseFacebook = (response) => {
        const payload = {
            id: response.id,
            name: response.name,
            email: response.email,
            token: response.accessToken,
            picture: response.picture

        }

        writeUserData(response.id, response.name, response.email)
    };

    function writeUserData(id, name, email) {
        fire.database().ref('usersUsername/' + name).set({
            fbID: id,
            name: name,
            refDJ: "none",
            email: email
        }, function(error) {
            if (error) {
                // The write failed...
            } else {
                // Data saved successfully!
                setLoggedIn(true)

                // Change Button to Text Coming soon to IOS
            }
        });
    }

    return (
        <div className="App">
            <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            { !loggedIn ?
                <FacebookLogin
                    //autoLoad={true}
                    appId="2009920755111111" //APP ID NOT CREATED YET
                    fields="name,email,picture"
                    callback={responseFacebook}
                    textButton = "Join with Facebook"
                    icon="fa-facebook"
                />
            :
                <p>Logged In!</p>
            }
      </header>
    </div>

); }

export default App ;

React Facebook登录-登录后隐藏按钮

1 个答案: