javascript - 状态使用身份验证

Question

我是编码新手，我仍然对 if else 条件有问题，我有 2 个身份验证和一个后端，一个用于 React Native，一个用于 React，在登录中我想添加 is_store ，我想告诉系统如果用户名和密码正确且 is_sore = true ，则让他登录，如果密码正确且用户名正确但 is_store = false 不要让他登录

我正在尝试将 is_store 传递给登录组件我尝试了 if 条件，但它给了我错误的警报

注册组件

class RegistationForm extends Component {
  state = {
    username: "",
    phone_number: "",
    password: "",
    email: "",
    is_store: true <--- i want to pass it to Login 
  };

  componentWillUnmount() {
    this.props.errors.length && this.props.resetError();
  }
  changeHandler = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  submitHandler = async e => {
    e.preventDefault();
    this.props.signup(this.state, this.props.history);
  }; 
render() {
    return (
      <div className="container">
        <div
          style={{ marginTop: "125px" }}
          className="card o-hidden border-0 shadow-lg   col-12"
        >
          <div className="card-body p-0">
            <div className="row">
              <div className="col-lg-5 d-none d-lg-block bg-register-image  col-12" />
              <div className="col-lg-7  col-12">
                <div className="p-5">
                  <div className="text-center  col-12">
                    <h1 className="h4 text-gray-900 mb-4  col-12">
                      إنشاء حساب جديد
                    </h1>
                  </div>
                  <div className="text-center  col-12">
                    {!!this.props.errors.length && (
                      <div className="text-left alert alert-danger">
                        {this.props.errors.map(error => (
                          <li key={error}>{error}</li>
                        ))}
                      </div>
                    )}
                  </div>
                  <form onSubmit={this.submitHandler}>
                    <div className="form-group row">
                      <div className="col-sm-6 mb-3 mb-sm-0">
                        <Input
                          name="username"
                          value={this.state.username}
                          onChange={this.changeHandler}
                          className="form-control form-control-user"
                          placeholder=" السجل التجاري"
                          required
                        />
                      </div>
                      <div className="col-sm-6 mb-3 mb-sm-0">
                        <Input
                          name="phone_number"
                          value={this.state.phone_number}
                          type="tel"
                          onChange={this.changeHandler}
                          className="form-control form-control-user"
                          placeholder="Mobile Ex: 966555555555"
                          required
                          pattern="[0-9]{12}"
                        />
                      </div>
                      <br />
                      <br />

                      <div className="col-sm-6 mb-3 mb-sm-0">
                        <Input
                          name="password"
                          value={this.state.password}
                          onChange={this.changeHandler}
                          type="password"
                          className="form-control form-control-user"
                          placeholder="الرقم السري"
                          required
                        />
                      </div>
                      <div className="col-sm-6 mb-3 mb-sm-0 ">
                        <Input
                          name="email"
                          value={this.state.email}
                          onChange={this.changeHandler}
                          type="email"
                          className="form-control form-control-user"
                          placeholder="الإيميل"
                          required
                        />
                      </div>

                      <div className="col-12">
                        <button
                          style={{ padding: 9, marginTop: 20 }}
                          type="submit"
                          className="btn btn-success col-12 "
                        >
                          إنشئ حساب
                        </button>
                      </div>
                    </div>
                  </form>
                  <div className="text-center">
                    <Link to="/login" className="small">
                      املك حساب من قبل: تسجيل الدخول
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

登录组件

class Login extends Component {
  state = {
    username: "",
    password: "",
    is_store: false <-- is here the right place?
  };

  componentWillUnmount() {
    this.props.errors.length && this.props.resetError();
  }
  changeHandler = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  submitHandler = async e => {
    e.preventDefault();
## here is what i'm trying to do with is_store 
    if (this.state.is_store === true) {
      this.props.login(this.state, this.props.history);
    } else {
      alert("Wrong");
    }
  };
render() {
    return (
      <div className="container">
        <div className="row justify-content-center" style={{ marginTop: 125 }}>
          <div className="col-xl-10 col-lg-12 col-md-9">
            <div className="card o-hidden border-0 shadow-lg my-5">
              <div className="card-body p-0">
                <div className="row">
                  <div className="col-lg-6 d-none d-lg-block bg-login-image" />
                  <div className="col-lg-6">
                    <div className="p-5">
                      <div className="text-left">
                        <h1 className="h4 text-gray-900 mb-4">تسجيل الدخول</h1>
                        {!!this.props.errors.length && (
                          <div className="alert alert-danger" role="alert">
                            {this.props.errors.map(error => (
                              <li key={error}>{error}</li>
                            ))}
                          </div>
                        )}
                      </div>
                      <form onSubmit={this.submitHandler}>
                        <div
                          className="form-group col-12"
                          style={{ padding: 0 }}
                        >
                          <Input
                            name="username"
                            className="form-control form-control-user"
                            onChange={this.changeHandler}
                            value={this.state.username}
                            placeholder="رقم السجل التجاري"
                          />
                        </div>

                        <div
                          className="form-group col-12"
                          style={{ padding: 0 }}
                        >
                          <Input
                            type="password"
                            className="form-control form-control-user"
                            name="password"
                            value={this.state.passsword}
                            onChange={this.changeHandler}
                            placeholder="الرقم السري"
                          />
                        </div>

                        <button
                          style={{ padding: 9 }}
                          type="submit"
                          className="btn btn-primary col-12"
                        >
                          دخول
                        </button>

                        <hr />
                      </form>
                      <hr />

                      <div className="text-center">
                        <NavLink to={`/signup`}>إنشاء حساب جديد</NavLink>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

这是身份验证操作

export const login = (userData, history) => {
  return async dispatch => {
    try {
      let response = await instance.post("user/login/", userData);
      let user = response.data;
      setAuthToken(user.token);
      let decodedUser = jwt_decode(user.token);
      dispatch(setCurrentUser(decodedUser));
      history.push("/home");
    } catch (error) {
      console.log("error", error);
      dispatch(setErrors(error.response.data));
    }
  };
}; 

谢谢

Answer 1

一般来说，您只能将状态传递给子组件。您无法将状态从子组件传递到其父组件。

为了将状态传递给父组件，您需要存储该值。你可以使用 Redux 来做到这一点。它存储值，您可以在任何组件中获取该值。