Javascript 在本机事件的回调中，反应状态值为空

我有下一个部分：

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const handleUserKeyPress = useCallback((event) => {
    if (event.keyCode === 13) {
      doLogin({ username, password }, loginDispatch, callback);
    }
  }, []);

  useEffect(() => {
    window.addEventListener('keypress', handleUserKeyPress);
  }, [handleUserKeyPress]);

      <ProjectFormField
        label={t('email')}
        formInputProps={{
          value: username,
          onChange: (event) => setUsername(event.target.value),
        }}
        inputType="email"
      />

      <ProjectFormField
        label={t('password')}
        formInputProps={{
          value: password,
          onChange: (event) => setPassword(event.target.value),
        }}
        type="passwordField"

      />

     <Button
        label={'loginEnter'}
        id="login-button"
        disabled={ !username || !password}
        onClick={() => {
          doLogin({ username, password });
        }}
        
      />

     

const[username，setUsername]=useState（“”）；
const[password，setPassword]=useState（“”）；
const handleUserKeyPress=useCallback（（事件）=>{
如果（event.keyCode===13）{
doLogin（{username，password}，loginDispatch，callback）；
}
}, []);
useffect（（）=>{
window.addEventListener（'keypress'，handleUserKeyPress）；
}，[handleUserKeyPress]）；
setUsername（event.target.value），
}}
inputType=“电子邮件”
/>
设置密码（event.target.value），
}}
type=“passwordField”
/>
{
doLogin（{用户名，密码}）；
}}
/>

***其中ProjectFormField是我们为Material ui文本字段组件定制的应用程序包装器

当我点击按钮时，用户名和密码的值在状态中存在。当我按下enter按钮时，回调函数正在工作，但状态中的值为空。 我还尝试使用userRef解决方案，其中ref是登录组件的包装容器，但结果是相同的。

---

我做错了什么？

您可能想在这里使用

useRef

hook。

---

以下是您可以参考的codesandbox链接：

您可能希望在此处使用

useRef

hook。

---

下面是您可以参考的codesandbox链接：

因此，如果我理解正确，您可以填写表单，点击enter，当调用回调时，您的状态为空，尽管表单已填写。是吗？状态参数（

username

和

password

）不会在

handleUserKeyPress

中更新，因为它是使用

useCallback

钩子的函数。您可以将

username

和

password

添加到

useCallback

依赖项数组中，这两个数组中的任何一个更改都会更新回调。但出于性能原因，我不推荐。@AdrianPascu是的indeed@LuudJacobs这一个正在工作，但我有3个回调调用：1）状态仍然为空，2）用户名已填充，密码为空，3）状态已填充。。。。如此简单的形式是正确的行为吗？这个可以避免吗？我think@LuudJacobs这是对的。您也不能使用

useCallback

。因为它是一个登录表单，所以备忘录不应该提高太多性能。因此，如果我理解正确，您填写表单，点击enter，当调用回调时，您的状态为空，尽管表单已填写。是吗？状态参数（

username

和

password

）不会在

handleUserKeyPress

中更新，因为它是使用

useCallback

钩子的函数。您可以将

username

和

password

添加到

useCallback

依赖项数组中，这两个数组中的任何一个更改都会更新回调。但出于性能原因，我不推荐。@AdrianPascu是的indeed@LuudJacobs这一个正在工作，但我有3个回调调用：1）状态仍然为空，2）用户名已填充，密码为空，3）状态已填充。。。。如此简单的形式是正确的行为吗？这个可以避免吗？我think@LuudJacobs这是对的。您也不能使用

useCallback

。因为它是一个登录表单，所以备忘录不应该太多地提高性能。