Reactjs 我总是落后一步

我在React中有各种各样的函数，其中我需要使用useState更改状态，然后根据新状态是否满足某些条件执行一些操作

当使用prop=“newpassword”调用handleChange时，它使用useState中的setValues方法设置newpassword的值。然后使用正则表达式测试对新密码进行评估，如果它有效，则状态变量passwordIsValid应设置为true

const handleChange = prop => event => {
    setValues({ ...values, [prop]: event.target.value })

    if (prop === 'newpassword' && passwordValidation.test(values.newpassword)) {
      setValues({ ...values, passwordisValid: true })
      console.log(prop, values.passwordisValid)
    } else {
      console.log(prop, values.passwordisValid)
    }
  }

状态总是比tho慢一步，我知道这是因为useState是异步的，但我不知道如何使用useEffect检查状态？对hooks非常陌生，有人能帮我吗？

useState（）

hook只是一个函数调用。它返回值和函数对<代码>值只是一个常量，它没有任何属性绑定

// Think of this line
const [values, setValues] = useState(0);

// As these two lines
const values = 0;
const setValues = someFunction;

调用

setValues

react时，将更新下一次渲染的值。下次组件渲染时，它将再次调用

useState

，该调用将返回新值

作为解决方案，您应该使用

event.target.value

。不过，您不想直接使用它，因为在观察event.target之后，它将被置为空

const newValue = event.target.value
// use newValue to setValues etc

---

在任何特定渲染中，道具和状态永远保持不变，组件渲染中的每个函数（包括其中的事件处理程序、效果、超时或API调用）都会捕获定义它的渲染调用的道具和状态。因此，如果您尝试在事件处理程序中访问values.newPassword，您将始终获得该特定呈现的状态，即旧密码

---

只需将useState视为一个函数，它返回特定渲染的状态，并且该状态对于该特定渲染是不可变的。

新状态将仅在下一步中可用。但你已经知道这个州会是什么样子。测试

event.target.value

而不是尝试向setValues传递回调：

setValues（current=>（{…current，passwordIsvalid:true}））

，正如Dupocas所说；改为测试event.target.value。通过

useffect（）

在一个effect中运行条件逻辑，这样可以保持代码干净，并且可以获得新的和更新的值。