React state 值在本机事件的回调中为空

Question

I have next component:

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

     

***Where ProjectFormField is our custom app wrapper for Material ui text field component

When I do click on button the values of username and password exists in state. When I press the enter button, the callback function is working, but values in state are empty. I also tried solution with userRef, where the ref was the wrapper container of login component, but the result was the same. What I am doing wrong?

Answer 1

you might want to use useRef hook here. Here is the codesandbox link you can refer: https://codesandbox.io/s/exciting-framework-mprqg?file=/src/index.js

Answer 2

I was having the same issue today & once in the last week, which I postponed. Saw this question & answer. Then found this github reply .

There I saw an example about how useRef can be used. I found it as making things complex. However, in the end he outlines about passing a function to setState function to update the values. It worked great!

In my case it was like this:

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

}