当我使用本机反应时，如何在 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};

(reducer/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),
      
      ]);
    }

(reducer/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();
}, []);