React使用自定义useStore钩子出现RangeError栈溢出问题求助

核心问题：无限递归渲染 #

你的StoreContextProvider组件内部犯了一个低级错误——你在组件的返回值里调用了组件自身，而不是StoreContext对应的Provider组件。这会导致每次组件渲染时，都会递归创建新的StoreContextProvider实例，最终触发栈溢出错误。

错误代码片段：

export const StoreContextProvider = ({ children }) => (
  // 这里误用了组件自身，导致无限递归
  <StoreContextProvider value={useStore()}>{children}</StoreContextProvider>
);

修复方案 #

把组件内部的StoreContextProvider替换为StoreContext.Provider（createContext返回的对象自带Provider属性）：

import { useState, createContext, useContext } from "react";

//custom hook , useStore
const useStore = () => {
  const [user, setUser] = useState("");
  const [cartCount, setCartCount] = useState(0);

  return {
    user,
    cartCount,
    login: () => setUser("Jack"),
    logout: () => setUser(""),
    // 额外优化：用函数式更新避免闭包陷阱
    addToCart: () => setCartCount(prevCount => prevCount + 1),
  };
};

const StoreContext = createContext(null);

// 修复递归问题：使用StoreContext.Provider
export const StoreContextProvider = ({ children }) => (
  <StoreContext.Provider value={useStore()}>{children}</StoreContext.Provider>
);

export const useLogin = () => useContext(StoreContext).login;
export const useLogout = () => useContext(StoreContext).logout;
export const useAddToCart = () => useContext(StoreContext).addToCart;
export const useUser = () => useContext(StoreContext).user;
export const useCartCount = () => useContext(StoreContext).cartCount;

额外优化说明 #

上面的代码还优化了addToCart方法：原本的setCartCount(cartCount + 1)依赖闭包中的cartCount值，当连续调用addToCart时，可能会因为闭包捕获的是旧值导致状态更新不生效。改用函数式更新setCartCount(prevCount => prevCount + 1)，可以确保每次都基于最新的状态值进行更新。

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