當我使用 reactnative 時，如何在 useEffect 中使用異步等待？

Question

執行useEffect時，我想通過AsyncStorage獲取token，然后通過axios.post('/auth/me')路由器獲取數據值，並用disaptch執行KAKAOLOG_IN_REQUEST動作。

用console.log檢查數據值的結果，數據值進來了。 但是當我運行我的代碼時，就會出現這個錯誤。

    Possible Unhandled Promise Rejection (id: 1):
    Error: Actions may not have an undefined "type" property. Have you misspelled a constant?
    Error: Actions may not have an undefined "type" property. Have you misspelled a constant?

我該如何修復我的代碼？...

這是我的代碼

(index.js)

    const App = ({}) => {
      const dispatch = useDispatch();
      useEffect(() => {
        async function fetchAndSetUser() {
          const token = await AsyncStorage.getItem('tokenstore', (err, result) => {
          });
          var {data} = await axios.post(
            '/auth/me',
            {},
            {
              headers: {Authorization: `Bearer ${token}`},
            },
          );
          console.log("data:",data);
          
          dispatch({
            type: KAKAOLOG_IN_REQUEST,
            data: data,
          });
        }
        fetchAndSetUser();
      }, []);

      return <Navigator />;
    };

    export {App};

（減速器/user.js）

    import {
      KAKAOLOG_IN_FAILURE,
      KAKAOLOG_IN_REQUEST,
      KAKAOLOG_IN_SUCCESS,
    
    } from '../reducers/user';



    function* watchkakaoLogIn() {
      yield takeLatest(KAKAOLOG_IN_REQUEST, kakaologIn);
    }



    function* kakaologIn(action) {
      try {
        // const result = yield call(kakaologInAPI, action.data);
        yield put({
          type: KAKAOLOG_IN_SUCCESS,
          data: action.data,
        });
      } catch (err) {
        console.error(err);
        yield put({
          type: KAKAOLOG_IN_FAILURE,
          error: err.response.data,
        });
      }
    }

    export default function* userSaga() {
      yield all([
        fork(watchkakaoLogIn),
      
      ]);
    }

（減速器/index.js）

    import { combineReducers } from 'redux';

    import user from './user';
    import post from './post';

    // (이전상태, 액션) => 다음상태
    const rootReducer = (state, action) => {
      switch (action.type) {
        // case HYDRATE:
        //   // console.log('HYDRATE', action);
        //   return action.payload;
        default: {
          const combinedReducer = combineReducers({
            user,
            post,
          });
          return combinedReducer(state, action);
        }
      }
    };

    export default rootReducer;

(src/index.js)

    import {KAKAOLOG_IN_REQUEST} from '../sagas/user';



    const App = ({}) => {
      const dispatch = useDispatch();

      useEffect(() => {
        async function fetchAndSetUser() {
          try {
            const token = await AsyncStorage.getItem('tokenstore');
            const {data} = await axios.post(
              '/auth/me',
              {},
              {
                headers: {Authorization: `Bearer ${token}`},
              },
            );
            console.log('data::::::', data);

            dispatch({
              type: 'KAKAOLOG_IN_REQUEST',
              data: data,
            });
          } catch (error) {
          }
        }
        fetchAndSetUser();
      }, []);

      return <Navigator />;
    };

    export {App};

Answer 1

問題

錯誤消息是說您的代碼可能會引發錯誤並且未得到處理。 它還說KAKAOLOG_IN_REQUEST由於某種原因未定義（也許您忘記導入它，或者它實際上是一個字符串）。

解決方案

在try/catch中包圍你的異步代碼。 定義KAKAOLOG_IN_REQUEST或作為字符串傳遞"KAKAOLOG_IN_REQUEST" 。

useEffect(() => {
  async function fetchAndSetUser() {
    try {
      const token = await AsyncStorage.getItem('tokenstore');
      const {data} = await axios.post(
        '/auth/me',
        {},
        {
          headers: { Authorization: `Bearer ${token}` },
        },
      );
      console.log("data:",data);
      
      dispatch({
        type: 'KAKAOLOG_IN_REQUEST',
        data: data,
      });
    } catch(error) {
      // handle error, logging, etc...
    }
  }
  fetchAndSetUser();
}, []);