密码验证器，使用钩子，状态没有更新，显示没有错误

Question

Functions <——image

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

验证函数代码

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