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

状态总是比tho慢一步，我知道这是因为useState是异步的，但我不知道如何使用useEffect检查状态？胡克斯是个新手，有人能帮我吗？

Answer 1

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

只要把useState想象成一个函数，它返回特定渲染的状态，并且该状态对于特定渲染是不可变的。

Answer 2

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

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