React Hooks 状态总是落后一步

Question

我在 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)
    }
  }

状态总是落后一步 - 我知道这是因为 useState 是异步的，但我不知道如何使用 useEffect 来检查状态？对 hooks 很陌生，有人可以帮助我吗？

Answer 1

useState()hook 只是一个函数调用。它返回值和函数对。values只是一个常量，它没有任何属性绑定。

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

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

当您调用setValuesReact 时，会更新下一次渲染的值。下次组件渲染时，它将useState再次调用，这将返回新值。

作为解决方案，您应该使用event.target.value. 但您不想直接使用它，因为 event.target 在您观察到它之后就无效了。

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