在行动之前依靠反应钩子状态变化

问题描述

我很难使用反应状态，需要你的帮助。

我正在使用自定义钩子来验证某种形式。
我每时每刻都在使用另一个钩子来控制系统状态。
问题是验证后，状态更新速度不够快。

我正在添加一个基本场景来举例说明我的问题。

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 (将#修改为@）