React Hook useEffect依赖缺失警告解决求助，需部署至Netlify

问题原因 #

控制台警告是因为useEffect调用了handleDiscount和handleBonusItem但未将其加入依赖数组；直接添加后触发错误，是因为这两个函数在组件每次渲染时都会重新创建，导致useEffect无限执行。

解决方案 #

通过useCallback稳定函数引用，并拆分useEffect分别处理不同逻辑，彻底消除警告和循环问题。

修改步骤 #

• 导入useCallback钩子
• 用useCallback包裹handleDiscount，指定依赖为birdInCart
• 用useCallback包裹handleBonusItem，指定依赖为total和bonusItems
• 拆分useEffect，分别监听购物车变化计算折扣、监听总价变化更新赠品信息
• 优化addToCart中的setTotal为函数式更新，避免闭包导致的状态错误

修改后的完整App.js代码 #

import { useEffect, useState, useCallback } from "react";
import BirdCard from "./components/BirdCard";
import Cart from "./components/Cart";
import bonusItems from "./data/bonusItems.js"

function App() {
  const [birdInCart, setBirdInCart] = useState([]);
  const [total, setTotal] = useState(0);
  const [bonusItem, setBonusItem] = useState([]);
  const [message, setMessage] = useState("")

  const addToCart = (bird) => {
    const birdCartItem = {
        id: Math.random(),
        name: bird.name,
        price: bird.amount,
        image: bird.image,
    };
    setBirdInCart([...birdInCart, birdCartItem]);
    // 函数式更新获取最新total状态，避免闭包问题
    setTotal(prevTotal => prevTotal + birdCartItem.price);
  }

  // useCallback包裹，稳定函数引用
  const handleDiscount = useCallback(() => {
    let discount = 0
    let totalPrice = birdInCart.reduce((acc, bird) => acc + bird.price, 0)

    if (birdInCart.length >= 3) {
      discount = .10 * totalPrice
    }
    setTotal(totalPrice - discount);
  }, [birdInCart]);

  // useCallback包裹，稳定函数引用
  const handleBonusItem = useCallback(() => {
    let updatedMessage = "";
  
    if (total >= 100 && total < 300) {
      setBonusItem(bonusItems.slice(0, 1));
      updatedMessage = "Your donation has qualified you for the following item: ";
    } else if (total >= 300 && total < 500) {
      setBonusItem(bonusItems.slice(0, 2));
      updatedMessage = "Your donation has qualified you for the following items: ";
    } else if (total >= 500 && total < 1000) {
      setBonusItem(bonusItems.slice(0, 3));
      updatedMessage = "Your donation has qualified you for the following items: ";
    } else if (total >= 1000) {
      setBonusItem(bonusItems.slice());
      updatedMessage = "Your donation has qualified you for the following items: ";
    } else {
      updatedMessage = "Make a donation and receive a bonus item!";
    }
    setMessage(updatedMessage);
  }, [total, bonusItems]);

  // 购物车内容变化时重新计算折扣
  useEffect(() => {
    handleDiscount();
  }, [birdInCart, handleDiscount]);

  // 总价变化时更新赠品信息
  useEffect(() => {
    handleBonusItem();
  }, [total, handleBonusItem]);

  // const removeFromCart = (bird) => {

  // }

  return (
    <>
      <header>
        <h1>Noni's Bird Sanctuary</h1>
      </header>
      <BirdCard 
        addToCart={addToCart}
        />
      <Cart 
        birdInCart={birdInCart} 
        total={total}
        message={message} 
        bonusItem={bonusItem}
      />
    </>
  )
}

export default App;

修改说明 #

• useCallback缓存函数引用，仅当依赖项变化时重新生成函数，加入useEffect依赖数组后不会触发无限循环
• 拆分useEffect让逻辑边界更清晰，避免单useEffect处理多逻辑导致的循环触发
• 函数式更新setTotal确保获取到最新的状态值，避免闭包引起的计算错误

内容的提问来源于stack exchange，提问作者Noni P.