Javascript 无法在ReactJS登录页中获取更新状态

我是新手，遇到了一个问题。我正在构建一个登录页面，当用户输入无效凭据时，我想在其中显示一些错误。当我输入正确的凭据时，我可以登录，但当我输入无效凭据时，我也可以登录。调试时，我发现在mapPropsToState中，虽然我将isLoggedIn参数设置为false，但它没有映射到props。道具在这里仍然是真的。 我的登录页面：

const required = (value) => {
  if (!value) {
    return (
      <div className="alert alert-danger" role="alert">
        This field is required!
      </div>
    );
  }
};

const Login = (props) => {
  const form = useRef();
  const checkBtn = useRef();

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);

  const { isLoggedIn } = useSelector(state => state.auth);
  const { message } = useSelector(state => state.message);

  const dispatch = useDispatch();

  const onChangeUsername = (e) => {
    const username = e.target.value;
    setUsername(username);
  };

  const onChangePassword = (e) => {
    const password = e.target.value;
    setPassword(password);
  };

  const handleLogin = (e) => {
    e.preventDefault();
    setLoading(true);
    form.current.validateAll();
    if (checkBtn.current.context._errors.length === 0) {
      dispatch(login(username, password))
        .then(() => {
          if (props !=null && props.isAuthenticated) {
            props.history.push("/home");
          }
        })
        .catch(() => {
          setLoading(false);
        });
    } else {
      setLoading(false);
    }
  };

  if (isLoggedIn) {
    // return <Redirect to="/home" />;
  }

  return (
    <div className="col-md-12">
      <div className="card card-container">
        <img
          src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
          alt="profile-img"
          className="profile-img-card"
        />

        <Form onSubmit={handleLogin} ref={form}>
          <div className="form-group">
            <label htmlFor="username">Username</label>
            <Input
              type="text"
              className="form-control"
              name="username"
              value={username}
              onChange={onChangeUsername}
              validations={[required]}
            />
          </div>

          <div className="form-group">
            <label htmlFor="password">Password</label>
            <Input
              type="password"
              className="form-control"
              name="password"
              value={password}
              onChange={onChangePassword}
              validations={[required]}
            />
          </div>

          <div className="form-group">
            <button className="btn btn-primary btn-block" disabled={loading}>
              {loading && (
                <span className="spinner-border spinner-border-sm"></span>
              )}
              <span>Login</span>
            </button>
          </div>

          {message && (
            <div className="form-group">
              <div className="alert alert-danger" role="alert">
                {message}
              </div>
            </div>
          )}
          <CheckButton style={{ display: "none" }} ref={checkBtn} />
        </Form>
      </div>
    </div>
  );
};
Login.propTypes = {
  login: PropTypes.func.isRequired,
  isAuthenticated: PropTypes.bool.isRequired
}
const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isLoggedIn
})
export default connect(mapStateToProps, { login })(Login);

减速器等级：

    const user = JSON.parse(localStorage.getItem("user"));

const initialState = user
  ? { isLoggedIn: true, user }
  : { isLoggedIn: false, user: null };

export default function (state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case LOGIN_SUCCESS:
      return {
        ...state,
        isLoggedIn: true,
        user: payload.user,
      };
    case LOGIN_FAIL:
      return {
        ...state,
        isLoggedIn: false,
        user: null,
      };
    case LOGOUT:
      return {
        ...state,
        isLoggedIn: false,
        user: null,
      };
    default:
      return state;
  }
}

有人能帮我吗

---

编辑：我在mapStateToProps中的状态变量中得到了正确的值，但不知何故，当我尝试在分派调用的then函数中使用它时，我仍然得到了props.I验证为true。虽然我在MapStateTops中更新了它，它应该变成false。

如果您被重定向到

/home

，我会首先查看您的验证函数，因为正如您所说，传递无效值。如果您有无效的输入

form.current.validateAll（），该函数会做什么？
如果您被重定向到
/home
我会首先查看您的验证函数，因为正如您所说，传递无效值。如果您有无效的输入
form.current.validateAll（），该函数会做什么？
此函数在将数据发送到api之前验证字段。我还添加了一个编辑，请检查一下。只是想澄清一下：你说你可以使用有效和无效的凭据登录。你说的登录是什么意思？是否使用错误的凭据重定向到
/home
？如果是这样，那么我会先研究验证函数，然后再处理Redux。检查此条件
checkBtn.current.context.\u errors.length==0
是否执行了它应该执行的操作此函数在将数据发送到api之前验证字段。我还添加了一个编辑，请检查一下。只是想澄清一下：你说你可以使用有效和无效的凭据登录。你说的登录是什么意思？是否使用错误的凭据重定向到
/home
？如果是这样，那么我会先研究验证函数，然后再处理Redux。检查此条件
checkBtn.current.context.\u errors.length==0
是否执行了它应该执行的操作
    const user = JSON.parse(localStorage.getItem("user"));

const initialState = user
  ? { isLoggedIn: true, user }
  : { isLoggedIn: false, user: null };

export default function (state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case LOGIN_SUCCESS:
      return {
        ...state,
        isLoggedIn: true,
        user: payload.user,
      };
    case LOGIN_FAIL:
      return {
        ...state,
        isLoggedIn: false,
        user: null,
      };
    case LOGOUT:
      return {
        ...state,
        isLoggedIn: false,
        user: null,
      };
    default:
      return state;
  }
}