React中处理关注状态：不添加依赖的更新请求，现有代码可行吗？

问题1：useEffect用了错误的async回调写法 #

你第二个useEffect直接传了async函数，这不符合React的规则——useEffect的回调不能是async函数，因为async函数会返回Promise，而useEffect只接受返回清理函数或者undefined的回调，这么写会触发React警告，还可能导致未完成的异步请求出现内存泄漏。

问题2：没法保证isFollow变化时拿到最新的作者信息 #

虽然你用第一个useEffect把fetchedAuthor同步到currentAuthor状态，但React的状态更新是异步的。如果在currentAuthor还没完成更新时就触发了isFollow变化，第二个useEffect里拿到的currentAuthor还是旧的作者信息，达不到“使用最新fetchedAuthor”的要求。而且这个currentAuthor状态属于冗余状态，完全可以用更合适的方式替代。

修正后的代码示例 #

import { useEffect, useRef } from 'react';

// 用ref存储最新的作者信息，无需额外维护状态
const authorRef = useRef(fetchedAuthor);

// 作者切换时，仅更新ref的内容，不会触发任何useEffect
useEffect(() => {
  authorRef.current = fetchedAuthor;
}, [fetchedAuthor]);

// 处理关注逻辑的useEffect，仅在isFollow变化时执行
useEffect(() => {
  // 将异步逻辑封装到内部函数，避免直接给useEffect传async回调
  const handleFollowChange = async () => {
    try {
      // 直接从ref获取最新的作者信息
      const response = await fetch(`URL/${authorRef.current}/${isFollow}`);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error(error);
    }
  };

  handleFollowChange();

  // 可选：添加清理函数，取消未完成的请求，避免内存泄漏
  const controller = new AbortController();
  return () => controller.abort();
}, [isFollow]);

修正逻辑说明 #

• 用useRef存储作者信息：切换作者时，仅更新ref的current属性，不会触发关注逻辑的useEffect，符合“作者切换不触发关注处理”的需求；同时ref的更新是同步的，下次isFollow变化时，能确保拿到最新的作者数据。
• 内部封装异步函数：解决了useEffect不能直接使用async回调的问题，还能通过清理函数取消未完成的请求，避免内存泄漏。
• 移除冗余状态：不再需要维护currentAuthor这个额外状态，代码更简洁高效。

内容的提问来源于stack exchange，提问作者Vishwa Gaikwad