setState 之后事件侦听器处理程序中的状态值错误

Question

我只是想了解 JavaScript 引擎的这种行为。我有一个事件监听器，它在事件后调用处理程序。在这个处理程序中，我刷新我的令牌并将其放入 redux。在第一次调用时一切正常，但是当处理程序再次调用时，我有令牌刷新错误，因为它发送旧的刷新令牌，与 redux 中的不同。

import React, {useEffect, useState} from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {setAuthData} from '../redux/actions/actions';



const Distributor = props => {
  const dispatch = useDispatch();
  const auth = useSelector(store => store.Auth); // auth from redux


  useEffect(() => {                              // setting my event listener
    AppState.addEventListener('change', handleAppStateChange);
    return () => {
      console.log('distributor unmount');
      AppState.removeEventListener('change', handleAppStateChange);
    };
  }, []);

  const handleAppStateChange = nextAppState => {   // my handler
    if (nextAppState === 'active') {
      getProfileData()
    }
  };

async function getProfileData() {                 // function that processes refreshing token
    try {
      const responseFromAuth = await refreshToAccessToken(
        auth.refresh_token,
      ).then(res => res.json());
      if (responseFromAuth.access_token) {
        dispatch(setAuthData(responseFromAuth));
      } else {
        console.log(
          `Error getting access token from refresh in distributor: ${
            responseFromAuth.error_description
          }`,
        );
      }
    } catch (e) {
      console.log(`Error getting profile data: ${e}`);
    }
  }
}

Answer 1

发生这种情况是因为您的处理程序 (handleAppStateChange) 仅在您第一次渲染组件时调用 [onMount (useEffect(() => {...},[]))] 并且它始终使用旧版本的 auth.refresh_token

为解决此问题，您可以在每次 refresh_token 有新值（getProfileData 之后）时监听 auth.refresh_token 的变化并重新添加您的 EventListener：

 useEffect(() => {                              // setting my event listener
    AppState.addEventListener('change', handleAppStateChange);
    return () => {
      AppState.removeEventListener('change', handleAppStateChange);
    };
  }, [auth.refresh_token]);

您也可以使用React.useCallback 进行记忆回调。 https://reactjs.org/docs/hooks-reference.html#usecallback

更多信息：Wrong React hooks behaviour with event listener