如何在 Es6 中使用 async function

Question

我是反應的初學者。 我想在 userEffect 掛鈎中使用異步等待。 但是我遇到了一個語法問題，我無法解決。

代碼：

useEffect(()=>{
    checkLogin=async()=>{
      await checkUserLogin=()=>{
        if(sessionStorage.getItem('username')==null){
          loggedIn = false
        }
        else{
          loggedIn = true
        }
      }
    }
  })

我的錯誤是：

./src/component/my_router.jsx
SyntaxError: /home/mnt/project/react_js/todo-list/src/component/my_router.jsx: Invalid left-hand side in assignment expression. (24:6)

  22 |     console.log(sessionStorage.getItem('username'))
  23 |     checkLogin=async()=>{
> 24 |       await checkUserLogin=()=>{
     |       ^
  25 |         if(sessionStorage.getItem('username')==null){
  26 |           loggedIn = false
  27 |         }

我想在我的 dom 第一次啟動時檢查 session 存儲。 我如何檢查它？ 請幫我...

Answer 1

 ./src/component/my_router.jsx SyntaxError: /home/mnt/project/react_js/todo-list/src/component/my_router.jsx: Invalid left-hand side in assignment expression. (24:6) 22 | console.log(sessionStorage.getItem('username')) 23 | checkLogin=async()=>{ > 24 | await checkUserLogin=()=>{ | ^ 25 | if(sessionStorage.getItem('username')==null){ 26 | loggedIn = false 27 | }

在這里，您似乎正在嘗試進行一些異步聲明。

await checkUserLogin = () => {

但是這個 OFC 不是有效的語法。

我懷疑您打算將checkUserLogin聲明為async function，或者您正在嘗試等待 session 存儲。 由於sessionStorage不是異步的，因此無需等待，您可以簡單地訪問該值。

useEffect(() => {
  checkLogin = () => {
    if(sessionStorage.getItem('username') === null){
      loggedIn = false;
    } else{
      loggedIn = true;
    }
  }

  checkLogin();
}, []);

由於checkLogin也不需要等待異步代碼，您只需將邏輯放在useEffect的回調主體中即可。

useEffect(() => {
  if(sessionStorage.getItem('username') === null){
    loggedIn = false;
  } else{
    loggedIn = true;
  }
}, []);

或者更簡潔

useEffect(() => {
  loggedIn = !!sessionStorage.getItem('username');
}, []);

Answer 2

應避免在 useEffect 本身上使用異步。

相反，您應該在 useEffect 掛鈎之外創建 async-await function，然后在內部觸發它。

是這樣的：

const fetchToken = useCallback(async () => {
    let response = await getAccessTokenSilently();
    setToken(response);
  }, [getAccessTokenSilently]);

useEffect(()=>{
 fetchToken()
  },[fetchToken])

Answer 3

您不能像這樣在 useEffect 中直接使用 Async await 調用，為了實現這種方法，您必須那樣使用它。

useEffect(()=>{
    console.log(sessionStorage.getItem('username'))
       async function checkUserLogin() {
          checkLogin()
        }
        checkUserLogin();
  },[])

const checkLogin = async() =>{
 await ()=>{
        if(sessionStorage.getItem('username')==null){
          loggedIn = false
        }
        else{
          loggedIn = true
        }
      }
}

或者像這樣

useEffect(() => {
    (async() => {
        try {
             await ()=>{
                 if(sessionStorage.getItem('username')==null){
                     loggedIn = false
                  }
                 else{
                     loggedIn = true
                  }
             }
        } catch (e) {
            console.error(e);
        }
    })();
}, []);

Answer 4

只能在useEffect中定義調用function

 useEffect(() => {
   const myFunc= async()=> {
      // now you can use await in this
      let response = await fetch('URL')
      response = await response.json()
      dataSet(response)
    }

    myFunc()
  }, [])

Answer 5

您可以這樣定義您的 function：-

useEffect(()=>{
   const chechUserLogin = async() => {
       const checkLogin = () => new Promise((resolve,reject) => {
        if(sessionStorage.getItem('username')==null){
         loggedIn = false;
         reject(loggedIn);
        }
        else{
         loggedIn = true;
         resolve(loggedIn);
        }
       });
     const result = await checkLogin();//checkLogin must return a promise
     //process result
   }
  checkUserLogin();
},[]);

Answer 6

我解決...

useEffect(()=>{
    const checkLogin=async()=>{
      await (()=>{
        if(sessionStorage.getItem('username')==null){
          loggedIn = false
        }
        else{
          loggedIn = true
        }
      })
    }
  })