Javascript 国家使用认证

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

我正在尝试将is_存储传递到登录组件 我尝试了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>
    );
  }
}

---

谢谢

通常，您只能将状态传递给子组件。不能将状态从子组件传递到其父组件

---

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

通常，您只能将状态传递给子组件。不能将状态从子组件传递到其父组件

---

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

登录组件是注册表的子组件吗？你可以发布你的注册组件的渲染方法吗？我添加了登录和注册，因为登录不是注册表单的直接子项，你不能通过道具传递它。如果我是你，我会调查阿洛克提到的Redux。这使您可以访问一个集中状态，您可以在所有组件中使用该状态。我正在使用Redux，我有2个应用程序和1个后端（React&ReactNative），我想处理使用ReactNative签名的用户无法使用React登录的情况，这就是为什么我在后端添加了is_store（Rect for Stores）（ReactNative for Users）登录组件是注册表的子组件吗？你可以发布你的注册组件的渲染方法吗？我添加了登录和注册，因为登录不是注册表单的直接子项，你不能通过道具传递它。如果我是你，我会调查阿洛克提到的Redux。这使您可以访问一个集中状态，您可以在所有组件中使用该状态。我正在使用Redux，我有2个应用程序和1个后端（React&ReactNative），我想处理使用ReactNative签名的用户无法使用React登录的情况，这就是为什么我在后端添加了is_store（Rect for Stores）（ReactNative for Users）我实际上在使用Redux，我唯一想用“is_store”来处理前端的身份验证，我有2个应用程序和1个后端，（React&ReactNative）我想处理使用ReactNative签名的用户不能使用React登录的情况，这就是为什么我在后端添加is_store（Rect for Stores）（ReactNative for Users）您可以将令牌存储到服务器端。当用户登录到系统时，您需要保存一个令牌。下次当用户尝试使用其他方法登录时，您需要检查令牌是否已存在。如果该令牌不存在，则允许使用其他设备登录；如果该令牌存在，则显示一条消息，表明您已登录到其他设备。此尝试将从另一个设备注销您。我实际上正在使用Redux，我唯一想使用“is_store”来处理前端的身份验证，我有2个应用程序和1个后端，（React&ReactNative）我想处理使用ReactNative签名的用户无法使用React登录的情况，这就是为什么我在后端添加is_store（商店为Rect）（用户为ReactNative）您可以将令牌存储到服务器端。当用户登录到系统时，您需要保存令牌。下次当用户尝试使用其他方法登录时，您需要检查令牌是否已存在。如果令牌不存在，则允许使用其他设备登录，如果令牌存在，则显示消息表明您已存在已登录到其他设备。此尝试将使您从其他设备注销。

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));
    }
  };
};