Reactjs 在采取行动之前，依靠反应挂钩状态的变化 我很难使用react state，需要你的帮助。

我正在使用自定义钩子来验证某种表单
我正在使用另一个钩子来控制系统的状态
问题是在验证之后，状态更新不够快

我正在为我的问题添加一个基本场景

MainComponent.tsx（表格）

我知道状态更改是异步的，但有没有办法使其按预期工作？
其他方法是受欢迎的，但是这个演示与实际问题相比是微不足道的，所以我不知道一个完全不同的方法是否可行。

---

提前多谢

您正在从

validator.ts

导入函数，然后重新声明它们：

从“validator.ts”导入{validateSTA1，validateSTA2}

我很惊讶它居然还能工作。尝试在

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

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

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

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