Next.js状态变更后组件未更新 需刷新才显示UI变化问题

UI不更新的核心原因是你直接修改了Context中存储的状态对象：

context.cart[currentImage].quantity += 1

React的状态更新检测依赖对象/数组的引用变化，直接修改原对象属性不会生成新的引用，React会判定状态没有变化，不会触发组件重渲染，只有刷新页面重新从Cookie读取数据初始化时才能看到变更。

除此之外你的代码还有几个会导致异常的设计问题：

• 同一份购物车数据同时存在context.cart、本地statecartContext、cartCookie三个副本，靠useEffect联动同步很容易出现时序错乱，比如你执行Cookie.set时拿到的cartCookie还是更新前的旧值
• 靠切换布尔值currentQuantity触发useEffect执行更新逻辑非常不可靠，连续点击时如果两次布尔值相同，更新逻辑根本不会触发
• 本地statecartContext的同步useEffect依赖里写了cartContext本身，很容易造成死循环或者同步不及时
• 列表渲染没有加唯一key，也可能导致React渲染异常

1. 重构Context层逻辑，提供规范的不可变更新方法 #

不要允许组件外部直接修改Context里的cart属性，在Context Provider内封装专门的数量更新方法，保证状态更新时生成新的引用，同时统一处理Cookie持久化逻辑：

// AppContext定义文件
const AppContext = createContext();

const AppProvider = ({ children }) => {
  const [cart, setCart] = useState([]);

  // 初始化时从Cookie读取持久化数据
  useEffect(() => {
    const savedCart = Cookie.get("cartCookie");
    if (savedCart) setCart(JSON.parse(savedCart));
  }, []);

  // 封装商品数量更新方法，采用不可变更新模式
  const updateItemQuantity = (itemIndex, delta) => {
    setCart(prevCart => {
      const newCart = prevCart.map((item, idx) => {
        if (idx === itemIndex) {
          // 可选优化：防止数量减到0以下
          const newQuantity = Math.max(0, item.quantity + delta);
          return { ...item, quantity: newQuantity };
        }
        return item;
      }).filter(item => item.quantity > 0); // 可选：数量为0时自动从购物车移除
      
      // 状态更新完成后同步写入Cookie
      Cookie.set("cartCookie", JSON.stringify(newCart));
      return newCart;
    });
  };

  return (
    <AppContext.Provider value={{ cart, updateItemQuantity }}>
      {children}
    </AppContext.Provider>
  );
};

2. 简化购物车组件逻辑，删除冗余状态和无效effect #

组件内不需要额外存储购物车数据的本地副本，直接消费Context提供的cart数据和更新方法即可，点击事件直接触发更新，不需要靠中转state触发effect：

const Cart = () => {
  const { cart, updateItemQuantity } = useContext(AppContext);

  const findItemIndex = (targetItem) => {
    return cart.findIndex(item => item.name === targetItem.name);
  };

  return (
    <>
      {cart.map((image) => (        
        <div key={image.name}>       
          <Row>
            <Col>
              <img src={image.img} alt={image.name} />
              <div>
                <p>
                  <strong>{image.category}</strong> <br/> {image.name}
                </p>
              </div>
            </Col>
            <Col>
              <div className={styles.cartColBox}>
                {image.price}
              </div>
            </Col>
            <Col> 
              <div>
                <div className={styles.cartMiddleBox}>
                  {image.quantity}
                </div>
                <div>
                  <div onClick={() => updateItemQuantity(findItemIndex(image), 1)}>
                    +
                  </div>
                  <div onClick={() => updateItemQuantity(findItemIndex(image), -1)}>
                    -
                  </div>
                </div>
              </div>
            </Col>
            <Col>
              <div>
                100
              </div>
            </Col>
          </Row>    
        </div> 
      ))}  
    </>
  )
}

• 所有状态更新都遵循不可变原则，修改数组/对象时生成新的引用，React可以正常检测到状态变化，触发UI同步更新
• 同源数据只在Context中存储一份，从根源避免多副本同步的时序问题
• Cookie持久化逻辑放在状态更新的回调中，保证写入的永远是最新的购物车数据
• 移除了所有冗余的中转state和effect，点击后直接触发状态更新，逻辑更可靠，不会出现连续点击失效的问题
• 给列表项添加了唯一key，避免React渲染diff异常

内容的提问来源于stack exchange，提问作者József Kiss