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的旧版本

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

 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

欲了解更多信息： 错误的 React 钩子行为与事件侦听器