如何解决在行动之前依靠反应钩子状态变化
我很难使用反应状态,需要你的帮助。
我正在使用自定义钩子来验证某种形式。
我每时每刻都在使用另一个钩子来控制系统状态。
问题是验证后,状态更新速度不够快。
MainComponent.tsx(表单)
import * as React from "react";
const MainComponent = () => {
const [state1,setState1] = React.useState({});
const [state2,setState2] = React.useState({});
const {validateall,errors} = userValidator(state1,state2)
const {status} = useStatus(errors)
const handleClick = () => {
validateall()
console.log(status) // after validating,status is still not ok
if (status === "ok") {
runWhatEver()
} else {
console.log("getting in here :(")
runAnotherThing()
}
console.log(status) // here its "ok" already
}
return (
<div onClick={handleClick}>
....
</div>
);
}
useValidator.tsx
import * as React from "react";
import {validateState1,validateState2} from "validator.ts"
const userValidator = (state1,state2) => {
const [state1Errors,setState1Errors] = useState<any>({});
const [state2Errors,setState2Errors] = useState<any>({});
const validateState1UsingValidator = (newValue) => {
setState1Errors({
state1: validateState1(state1)
})
}
const validateState2UsingValidator = (newValue) => {
setState2Errors({
state1: validateState2(state2)
})
}
const validateall = () => {
validateState1();
validateState2();
}
return {validateall,errors: {state1Errors,state2Errors}}
}
验证器.ts
export const validateState1 = (newValue) => {
if (newValue.length <= 3) {
return "valuelength must be greater than 3";
}
}
export const validateState2 = (newValue) => {
if (newValue.length <= 3) {
return "valuelength must be greater than 3";
}
}
useStatus.tsx
import * as React from "react";
const useStatus = (errors) => {
const [status,setStatus] = useState("not ok");
useEffect(() => {
if (hasNoErrors()) {
setStatus("ok")
} else {
setStatus("not ok")
}
},[errors])
return {status}
}
我知道状态更改是异步的,但是有什么方法可以让它按预期工作吗?
欢迎使用其他方法,但与实际问题相比,此演示微不足道,因此我不知道完全不同的方法是否可行。
非常感谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。