为何依赖wishlist state的useEffect无限触发？求修复方案

问题根源 #

你当前的useEffect依赖数组包含wishlist，而useEffect内部又调用setWishlist更新这个状态——每次状态更新都会触发useEffect重新执行，进而再次更新状态，形成无限循环。

解决方案 #

1. 调整useEffect依赖项：移除wishlist，改用user作为依赖（心愿单与用户绑定，用户切换或初始加载时需要获取数据）。
2. 手动触发数据刷新：在添加/移除心愿单的操作完成后，主动调用获取心愿单的函数，实现实时更新。
3. 提取复用函数：将获取心愿单的逻辑单独提取，方便在组件内多处调用。

修改后的完整代码 #

const [ wishlist, setWishlist ] = useState([]);

// 提取获取心愿单的函数，方便复用
const getWishlist = async () => {
  try {
    const response = await userMethod.get(`/wishlist/user/${user}`);
    setWishlist(response.data[0].products);
  } catch (err) {
    console.log(err);
  }
};

// 初始加载和用户切换时获取数据
useEffect(() => {
  let mounted = true;
  
  const fetchData = async () => {
    if (mounted) {
      await getWishlist();
    }
  };

  fetchData();

  return () => {
    mounted = false;
  };
}, [user]); // 依赖改为user，切断循环链

// 添加心愿单的处理逻辑
const addtoWishlist = async () => {
  try {
    // 调用添加心愿单接口
    await userMethod.post('/wishlist', { userId: user, productId: product._id });
    // 添加完成后立即刷新心愿单
    await getWishlist();
  } catch (err) {
    console.log(err);
  }
};

// 移除心愿单的处理逻辑
const deleteWishlistItem = async () => {
  try {
    // 调用移除心愿单接口
    await userMethod.delete(`/wishlist/${user}/${product._id}`);
    // 移除完成后立即刷新心愿单
    await getWishlist();
  } catch (err) {
    console.log(err);
  }
};

const isProductInWishlist = wishlist.some((item) => item.productId._id === product._id);
  
return (
  { user ? 
    <Flex gap="10px">
      { isProductInWishlist ? 
        <Button  width="200px" padding="15px" colorScheme='teal' variant='solid'  cursor="pointer" fontWeight="500" 
          onClick={deleteWishlistItem} leftIcon={<BsHeartFill />}>Remove from Wishlist</Button>
       :
        <Button width="200px" padding="15px" colorScheme='teal' variant='solid'  cursor="pointer" fontWeight="500" 
          onClick={addtoWishlist} leftIcon={<BsHeart />}>Add to Wishlist</Button>
      }

      <Button width="200px" padding="15px" colorScheme='teal' variant='solid'  cursor="pointer" fontWeight="500" 
        onClick={handleClick} leftIcon={<BiCart />}>Add to Cart</Button>
    </Flex>
    :
    null
  }
);

关键说明 #

• 依赖数组调整：user是心愿单的关联主体，仅在用户变化时重新获取数据，避免不必要的重复执行。
• 手动刷新状态：在添加/移除操作的异步请求完成后调用getWishlist，确保操作完成后立即更新前端状态，实现无刷新实时更新。
• 切断循环链：不再将wishlist作为依赖项，从根源上解决了“更新状态→触发useEffect→再次更新状态”的无限循环问题。

内容的提问来源于stack exchange，提问作者RAHMAN DHIKA