React Native中useEffect使用async函数出现类型错误求助

错误原因 #

useEffect的回调函数要求返回值为void或者清理函数（Destructor），但直接使用async作为回调时，函数会默认返回Promise<void>，这不符合TypeScript对EffectCallback的类型约束，因此触发类型错误。

解决方法 #

方法一：在useEffect内部定义并调用async函数

将异步逻辑封装到内部的async函数中，让useEffect的回调本身返回void，满足类型要求：

useEffect(() => {
  const fetchUsers = async () => {
    const users = await axios.get("https://randomuser.me/api/?page=1&results=10&nat=us");
    setUsers(users.data.results);
  };

  fetchUsers();
}, []);

方法二：结合AbortController处理请求清理（推荐）

如果需要避免组件卸载后仍执行状态更新的问题，可以使用AbortController取消未完成的请求，同时返回清理函数，既符合类型要求又提升代码健壮性：

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  const fetchUsers = async () => {
    try {
      const users = await axios.get("https://randomuser.me/api/?page=1&results=10&nat=us", { signal });
      setUsers(users.data.results);
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log('用户数据请求已取消');
      }
    }
  };

  fetchUsers();

  // 组件卸载或依赖更新时取消请求
  return () => controller.abort();
}, []);

内容的提问来源于stack exchange，提问作者sachin pandey