React state 值在本機事件的回調中為空

Question

我有下一個組件：

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

     

***其中 ProjectFormField 是我們的 Material ui 文本字段組件的自定義應用程序包裝器

當我單擊按鈕時，用戶名和密碼的值存在於 state 中。 當我按下回車按鈕時，回調 function 正在工作，但 state 中的值是空的。 我還嘗試了 userRef 的解決方案，其中 ref 是登錄組件的包裝容器，但結果是一樣的。 我做錯了什么？

Answer 1

你可能想在這里使用useRef鈎子。 這是您可以參考的代碼框鏈接： https://codesandbox.io/s/exciting-framework-mprqg?file=/src/index.js

Answer 2

我今天和上周有一次同樣的問題，我推遲了。 看到這個問題和答案。 然后找到這個github 回復。

在那里我看到了一個關於如何使用useRef的例子。 我發現它使事情變得復雜。 但是，最后他概述了將 function 傳遞給setState function 以更新值。 效果很好！

就我而言，它是這樣的：

const [posts, setPosts] = useState([]);

useEffect(function onLoad() {
  
  const unregisterEventListener = listenToNewPostEvent();

  return unregisterEventListener;

}, []);

function listenToNewPostEvent() {
  
  function handleNewPost(post) {
    // "posts" is empty in this line. 
    // Calling setPosts([post, ...posts]) always left "posts" with one entry.
    // So, I changed as follows as mentioned in the previously given link.
    setPosts(function updatePosts(posts) {
      // Here "posts", which is coming as parameter to this function is the latest one.
      return [post, ...posts];
    });
    // Now the posts array has the latest data & the same gets reflected in the screen as well.
  }

  return eventSystem.on(NEW_POST, handleNewPost);

}