React Native 调用异步函数并在另一个异步函数中使用 return

Question

我正在使用 React Native，我必须在挂载 (useEffect) 之前调用 2 个 Redux thunk。第一个是获取用户位置。第二个给了我那个位置附近的动物列表。

这是位置 Thunk（useLocation 是自定义挂钩）：

export const getLocation = () => async (dispatch) => {
  await useLocation()
    .then((res) => {
      dispatch(getLocationSuccess(res));
    })
    .catch((err) => {
      console.log(err, "ERROR");
    });
};

这非常有效。

这是动物的声音：

export const getAnimals = (data) => async (dispatch) => {
  await api.animals
    .list(data)
    .then((res) => {
        dispatch(getLostsSuccess(res.data));
    })
    .catch((err) => {
      console.log(err)
    });
};

这是 Api 帮手：

从“axios”导入 axios；

const requestHelper = axios.create({
  baseURL: "http://192.168.0.15:8000/api/",
  headers: {
    "Content-Type": "application/json",
  },
});

const routes = {
  animals: {
    list: (data) =>
      requestHelper({
        data,
        method: "post",
        url: "animals/list/",
      }),
};

export default routes;

这是组件（useEffect 和 async）：

useEffect(() => {
    asyncEffect()

  }, []);

 const asyncEffect = async () => {
    const location = await getLocation();
    getAnimals({ location: location, status: 1 });
  };

“位置”在 getAnimals thunk 中作为空对象发送，但状态加载正常。如何在 getLocation returns 之后使用 getAnimals thunk？

Answer 1

getLocation redux-action 不是等待的常规异步函数...它是 return 函数...

的函数

所以我建议你在 getLocation redux 动作

中成功获取位置后获取动物列表

export const getLocation = () => async (dispatch) => {
  await useLocation()
    .then((res) => {
      dispatch(getLocationSuccess(res));
      /**
       * call getAnimals here // <<--
       */
    })
    .catch((err) => {
      console.log(err, "ERROR");
    });
};

 const asyncEffect = async () => {
    const location = await getLocation();
    // getAnimals({ location: location, status: 1 });
  };

如果你想调用一次getAnimals

/** Executes only on app-mount */
useEffect(() => {
 getLocation();
}, []);


useEffect(() => {
  if (location) {
    // get animals here
    getAnimals({ location: location, status: 1 });
  }
}, [location]); // location is pulled from redux-store using mapStateToProps

React Native 调用异步函数并在另一个异步函数中使用 return

React Native Calling async function and use return in another async function

react-native

async-await

react-redux

redux-thunk

thunk