React Hooks 状态总是落后一步

IT技术 reactjs react-hooks
2021-05-26 11:55:07

我在 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 来检查状态？钩子很新，有人可以帮我吗？

2个回答

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

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

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

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

其它你可能感兴趣的问题
上一篇如何在 react.js 中检测父组件中的子渲染 下一篇Reactjs - 从应用程序的任何地方获取组件