时间戳

首页 > 解决方案 > 任何反应形式的数据都存储在哪里

reactjs - 任何反应形式的数据都存储在哪里

问题描述

我已经对此进行了编码，以便在添加社交登录名和电话时如何获取数据，因此我可以查询数据在 reactjs 中的存储位置以及我必须如何获取数据我想要电子邮件和电话号码以及有人登录时的姓名以便我可以集成api

import React, { Component } from "react"
import firebase from "firebase"
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth"

firebase.initializeApp({
    apiKey: "AIzaSyBPqAebQzVeT5Kbd57TsDwoF_l3pRCVomY",
    authDomain: "login-project-d33bf.firebaseapp.com"
})

class SocialLogin extends Component {
    state = { isSignedIn: false }
    uiConfig = {
        signInFlow: "popup",
        signInOptions: [
            firebase.auth.GoogleAuthProvider.PROVIDER_ID,
            firebase.auth.FacebookAuthProvider.PROVIDER_ID,
            firebase.auth.PhoneAuthProvider.PHONE_SIGN_IN_METHOD,
        ],
        callbacks: {
            signInSuccess: () => false
        }
    }

    componentDidMount = () => {
        firebase.auth().onAuthStateChanged(user => {
            this.setState({ isSignedIn: !!user })
            console.log("user", user)

            firebase.database().ref("signInSuccess").on("value", snapshot => {
                let signInSuccess = [];
                snapshot.forEach(snap => {
                    signInSuccess.push(snap.val());
                })
                this.setState({signInSuccess : signInSuccess})
            })
        })
    }

    render() {
        return (
            <div className="App">
                {this.state.isSignedIn ? (
                    <span>
                <div>Signed In!</div>
                <button onClick={() => firebase.auth().signOut()}>Sign out!</button>
                <h1>Welcome {firebase.auth().currentUser.displayName}</h1>
                <img
                    alt="profile picture"
                    src={firebase.auth().currentUser.photoURL}
                />
              </span>
                ) : (
                    <StyledFirebaseAuth
                        uiConfig={this.uiConfig}
                        firebaseAuth={firebase.auth()}
                    />
                )}


                {this.state.signInSuccess.map(data =>{

                    return (
                        <tr>
                            <td>{data.email}</td>
                            <td>{data.mobilenumber}</td>
                        </tr>
                    )
                })}
            </div>
        )
    }
}

export default SocialLogin

那么数据存储在哪里，因为我必须从代​​码中获取数据，所以我必须获取数据 useremail 和 phonenumber 和 name 那么我该怎么做呢？

标签： reactjsforms

解决方案

看起来错误正在发生，因为this.state.signInSuccess它不是数组。在执行之前检查是否this.state.signInSuccess是带有数据的数组可能会很好.map

render() {
    const { signInSuccess, isSignedIn } = this.state;
    const isSignInSuccess = Array.isArray(signInSuccess);

        return (
            <div className="App">
                {isSignedIn ? (
                    <span>
                <div>Signed In!</div>
                <button onClick={() => firebase.auth().signOut()}>Sign out!</button>
                <h1>Welcome {firebase.auth().currentUser.displayName}</h1>
                <img
                    alt="profile picture"
                    src={firebase.auth().currentUser.photoURL}
                />
              </span>
                ) : (
                    <StyledFirebaseAuth
                        uiConfig={this.uiConfig}
                        firebaseAuth={firebase.auth()}
                    />
                )}


                {isSignInSuccess && isSignInSuccess.map(data =>{
                    return (
                      <tr>
                          <td>{data.email}</td>
                          <td>{data.mobilenumber}</td>
                      </tr>
                    )
                })}
            </div>
        )
    }

推荐阅读