Javascript 在react中检查firebase中的用户名可用性

我目前一直在检查react中注册（在firebase上）中的唯一用户名。我的目标是 1.当用户输入用户名时，函数CheckNameAvailable将转到firebase数据库并检查该名称是否存在。 2.如果名称存在，则将UsernameAvalailable的状态设置为false，如果名称有效，则将其设置为true 3.如果用户名Available为false，则禁用注册的提交按钮。 4.如果使用用户名，请在textfield中使用帮助器文本来提醒当前用户。 我被if语句卡住了，我试了几次，但它不起作用。这是我的代码

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { auth } from "../firebase";
import { db} from "../firebase";
import "./auth.css";
import * as routes from "../constants/routes";
import { SignInLink } from "./SignIn";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const SignUpPage = ({ history }) => (
  <div align="center" className="SignUpBox">
    <h1>SignUp</h1>
    <SignUpForm history={history} />
    <SignInLink />
  </div>
);

const INITIAL_STATE = {
  username: "",
  name: "",
  email: "",
  passwordOne: "",
  passwordTwo: "",

  error: null
};
const byPropKey = (propertyName, value) => () => ({
  [propertyName]: value
});



class SignUpForm extends Component {

  state = { ...INITIAL_STATE };

  //   checkPassword() {
  //     if(!this.state.passwordOne || this.state.passwordOne !==    this.state.passwordTwo){
  //        this.setState({error:"passwords do not match"});
  //    }
  //    else {
  //        this.setState({error:null});
  //    }
  // }



  onSubmit = event => {
    event.preventDefault();

    const { email, passwordOne, name, username } = this.state;

    auth
      .doCreateUserWithEmailAndPassword(
        email,
        passwordOne,
        name,
        username
      )
      .then(authUser => {
        this.setState(() => ({ ...INITIAL_STATE }));
        this.props.history.push(routes.HOME);
      })
      .catch(error => {
        this.setState(byPropKey("error", error));
      });
  };

  render() {
    var usernameAvalaible
    const {
      username,
      name,
      email,
      passwordOne,
      passwordTwo,
      error
    } = this.state;

    checkNameAvalaible(){
      if (db.doc(`/users/${username}`).get().exists){
        this.setState{usernameAvalaible:false};
      }
      else{
        this.setState{usernameAvalaible:true};
      }

    };


    const isInvalid =
      passwordOne !== passwordTwo ||
      passwordOne === "" ||
      email === "" ||
      name === "" ||
      username === ""|| usernameAvalaible===false;

    return (
      <form onSubmit={this.onSubmit}>
        <TextField
          name="Username"
          id="standard-secondary"
          label="User name"
          color="primary"
          value={username}
      onChange={event =>
        this.setState(byPropKey("username", event.target.value))
      }
      type="text"
    />
    <TextField
      name="name"
      value={name}
      id="standard-secondary"
      label="Full name"
      color="primary"
      onChange={event =>
        this.setState(byPropKey("name", event.target.value))
      }
      type="text"
    />
    <TextField
      name="email"
      value={email}
      id="standard-secondary"
      label="Email Address"
      color="primary"
      onChange={event =>
        this.setState(byPropKey("email", event.target.value))
      }
      type="email"
    />
    <TextField
      name="password"
      value={passwordOne}
      id="standard-secondary"
      label="Password"
      color="primary"
      onChange={event =>
        this.setState(byPropKey("passwordOne", event.target.value))
      }
      type="password"
    />
    <TextField
      name="ConfirmPassword"
      value={passwordTwo}
      id="standard-secondary"
      label="Comfirm Password"
      color="primary"
      onChange={event =>
        this.setState(byPropKey("passwordTwo", event.target.value))
      }
      type="password"
    />

    <br />
    <br />

    <Button
      type="submit"
      disabled={isInvalid}
      variant="contained"
      color="primary"
    >
      Sign Up
    </Button>

    {error && <p style={{ color: "red" }}>{error.message}</p>}
      </form>
    );
  }
}

const SignUpLink = () => (
  <p>
    Don't have an account? <Link to={routes.SIGN_UP}>Sign Up</Link>
  </p>
);

export default SignUpPage;

export { SignUpForm, SignUpLink };

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
从“./firebase”导入{auth}；
从“./firebase”导入{db}；
导入“/auth.css”；
从“./constants/routes”导入*作为路由；
从“/SignIn”导入{SignInLink}；
从“@material ui/core/TextField”导入TextField；
从“@物料界面/核心/按钮”导入按钮；
const SignUpPage=（{history}）=>(
报名
);
常量初始状态={
用户名：“”，
姓名：“，
电邮：“，
密码一：“，
密码二：“，
错误：null
};
常量byPropKey=（propertyName，value）=>（）=>({
[propertyName]：值
});
类注册表单扩展组件{
状态={…初始状态}；
//检查密码（）{
//如果（！this.state.passwordOne | | this.state.passwordOne！==this.state.passwordTwo）{
//this.setState（{错误：“密码不匹配”}）；
//    }
//否则{
//this.setState（{error:null}）；
//    }
// }
onSubmit=事件=>{
event.preventDefault（）；
const{email，passwordOne，name，username}=this.state；
认证
.doCreateUserWithEmailAndPassword(
电子邮件，
密码一，
名称
用户名
)
。然后（authUser=>{
this.setState（（）=>（{…初始状态}））；
这个。道具。历史。推（路线。家）；
})
.catch（错误=>{
这个.setState（byPropKey（“error”，error））；
});
};
render（）{
var usernameavaile
常数{
用户名，
名称
电子邮件，
密码一，
密码二，
错误
}=本州；
CheckNameAvailable（）{
if（db.doc（`/users/${username}`）.get（）存在）{
this.setState{usernameavalable:false}；
}
否则{
this.setState{usernameavalable:true}；
}
};
康斯特·伊森瓦利德=
密码一！==密码二||
passwordOne==“”||
电子邮件===“”||
名称===“”||
用户名===“”| |用户名可用===false；
返回(
this.setState（byPropKey（“用户名”，event.target.value））
}
type=“text”
/>
this.setState（byPropKey（“name”，event.target.value））
}
type=“text”
/>
this.setState（byPropKey（“email”、event.target.value））
}
type=“电子邮件”
/>
this.setState（byPropKey（“passwordOne”，event.target.value））
}
type=“密码”
/>
this.setState（byPropKey（“passwordTwo”，event.target.value））
}
type=“密码”
/>




注册
{error&
{error.message}
}
);
}
}
常量符号上行链路=（）=>(

没有帐户？注册吧

);
导出默认签名；
导出{SignUpForm，SignUpLink}；

共享您的代码而不是图片！我的错，谢谢一位lotim a vuejs用户，所以我对react部分不是特别有用。但是，您可能希望1）使用debounce（lodash有一个），这样客户端就不会在每次击键时检查用户名；2） 使用firebase函数（express api或https.onRequest或graphql），而不是直接查询rtdb；分享你的代码而不是图片！我的错，谢谢一位lotim a vuejs用户，所以我对react部分不是特别有用。但是，您可能希望1）使用debounce（lodash有一个），这样客户端就不会在每次击键时检查用户名；2） 使用firebase函数（express api或https.onRequest或graphql），而不是直接查询rtdb；