密码验证器，使用挂钩，状态未更新，显示无错误

Question

Functions <-- 图片

在我的程序中状态没有改变

Function Code For Vallidation

    const checkPassword = (e) => {
    const password = e.target.value;
    Capital(password);
    Small(password);
    Numbers(password);
    Symbols(password);
    MinLen(password);
    console.log(ErrStatus.capital);
  };

这里我列出了所有变量使用哪个

  const capital = new RegExp("[A-Z]");
  const small = new RegExp("[a-z]");
  const number = new RegExp("[0-9]");
  const symbols = new RegExp("[@$!%#?&]");
  const minLen = new RegExp("[A-Za-zd@$!%*#?&]{8,}$");

  const ErrArr = {
    capital: "One capital Letter required",
    small: "One small Letter required",
    number: "One number Letter required",
    symbol: "One symbol  required",
    minLen: "min 8 character required",
  };
  const [ErrStatus, setErrStatus] = useState({
    capital: true,
    small: true,
    number: true,
    symbol: true,
    minLen: true,
  });

全部功能参考图片在我的代码中 'ErrStatus' 没有从我的函数（出现在图像中）更新

Answer 1

将状态拆分为个体

  const [caps, setCaps] = useState(true);
  const [small, setSmall] = useState(true);
  const [number, setNumber] = useState(true);
  const [symbol, setSymbol] = useState(true);
  const [minLength, setMinLen] = useState(true);

有效

Answer 2

您的问题可能与异步 javascript 函数有关。下一个检查应该运行只有在上一个检查完成之后。

因此您的代码应如下所示：

async function Capital(password){
  ...
  await setErrStatus({...ErrStatus, capital: false})
}
async function Small(password){
  ...
  await setErrStatus({...ErrStatus, small: false})
}
async function Numbers(password){
  ...
  await setErrStatus({...ErrStatus, numbers: false})
}
async function Symbols(password){
  ...
  await setErrStatus({...ErrStatus, symbols: false})
}
async function MinLen(password){
  ...
  await setErrStatus({...ErrStatus, minLen: false})
}

所以你可以这样称呼它们：

const checkPassword = async (e) => {
  const password = e.target.value;
  await Capital(password);
  await Small(password);
  await Numbers(password);
  await Symbols(password);
  await MinLen(password);
  console.log(ErrStatus.capital);
};

密码验证器，使用挂钩，状态未更新，显示无错误

Password Validator , using hooks , states are not updating , Showing No error

passwords

state

reactjs

react-hooks