如何使用 axios 清理 React-Native useEffect

Question

目前，我已经在功能组件中定义了一个 useEffect ，如下所示

useEffect(() => {
 (async function () {
   posts.current = await BlogConsumer.getBlogPosts();
   setLoading(false);
 })();

 return () => {
   BlogConsumer.call_controller.abort();
 };
}, []);

，其中 BlogConsumer 的定义如下。

class BlogConsumer {
  static posts = {};
  static call_controller = new AbortController();

  static async getBlogPosts() {
    await axios
      .get('https://nice.api', {
        signal: this.call_controller.signal,
      })
      .then(response => {
        // treatment for success
      })
      .catch(error => {
        // treatment for erros
      });

    return this.posts;
  }
}

export default BlogConsumer;

总体想法是，在组件的渲染中，我将从我的消费者调用一个静态方法，并且将检索必要的数据。为了避免内存泄漏，我在 useEffect 中有回调函数，每当我卸载组件时，该函数都会中止我的调用，但这不起作用。如果我在 API 调用完成之前进入组件并离开屏幕，React 的消息 警告：无法在未安装的组件上执行 React 状态更新。 仍然会出现。我不知道我错在哪里，所以我需要一些帮助。

提前致谢。

Answer 1

您可以取消卸载请求。像这样：

export const fetchData = async (signal) => {
  try {
    const res = await instance.get("/pages/home", {
      signal,
    });
    return res.data;
  } catch (error) {
    return Promise.reject(error);
  }
};

useEffect(() => {
  const controller = new AbortController();
  fetchData(controller.signal);
  return () => {
    controller.abort()
  };
}, []);