reactjs - React Facebook 登录 - 登录后 Conceal 按钮

Question

我有一个简单的 React 应用程序，它使用 facebook 登录并将详细信息保存到 firebase 数据库。

我需要做什么才能 Conceal 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 ;