Question

我正在完成一个应用程序，该应用程序要将我的GoogleMap API密钥隐藏在安全API的后面。我的意图是在我确认自己具有身份验证的用户后立即调用API密钥。问题在于，在异步调用之间，更改不会反映在状态更改中。

这就是我在做什么：

export default function App() {
  const [dateRange, setDateRange] = useState(initialDateRange);
  const [formState, updateFormState] = useState(initialFormState);
  const [user, setUser] = useState(null);
  const [googleApiKey, setGoogleApiKey] = useState(null);

  useEffect(() => {
    async function updateAuth() {
      try {
        await checkUser();
        await getGoogleApiKey();
        await setAuthListener();
      } catch (error) {}
    }
    updateAuth();
  }, []);

  async function checkUser() {
    try {
      const user = await Auth.currentAuthenticatedUser();
      setUser(user);
      if (user !== authenticatedUser) {
        updateFormState(() => ({
          ...formState,
          authenticatedUser: user
        }));
      }
    } catch (error) {
      console.log(error);
    }
  }

  async function getGoogleApiKey() {
    const googleApiUrl = `${process.env.REACT_APP_API_PATH}apikey?googleapikey=true`; 
    try {
      console.log('USER_USER_USER', user);
      const apiKey = await fetch(googleApiUrl, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: user.signInUserSession.idToken.jwtToken
        }
      });
      console.log('GOT_GOOGLE_API_KEY', apiKey);
      setGoogleApiKey(apiKey);
    } catch (error) {
      console.log(error);
    }
  }

  async function setAuthListener() {
    Hub.listen('auth', (data) => {
      const event = data.payload.event;
      switch (data.payload.event) {
        case 'signOut':
          console.log('signing out...');
          console.log(event);
          updateFormState(() => ({
            ...formState,
            username: '',
            password: '',
            email: '',
            authenticatedUser: null
          }));
          break;
        default:
          break;
      }
    });
  }

但是我得到了错误：

USER_USER_USER null
App.js:78 TypeError: Cannot read property 'signInUserSession' of null
    at getGoogleApiKey (App.js:72)
    at updateAuth (App.js:42)

如果这是错误的范例，我将不胜感激！

Answer 1

调用setUser时，user变量仍保留旧的user信息（在这种情况下为null），与async/await无关：

await checkUser();        // setUser(something) will not happen until next run
await getGoogleApiKey();  // user is still null
await setAuthListener();

另一种选择是在user更改时添加另一种效果：

useEffect(() => {
  if (user) {
     getGoogleApiKey();
  }
}, [user]);

或者，通过以下参数调用getGoogleApiKey：

const user = await checkUser(); // return user
await getGoogleApiKey(user);
await setAuthListener();

由于逻辑变得复杂，因此我建议尝试useReducer hook，因为分派简化了这种复杂的来回场景。

在React中将Async函数放入useEffect（）挂钩

1 个答案: