React Context状态每次渲染重置的问题求助

1. 解决状态覆盖（仅显示单个告警/状态看似重置） #

核心问题出在addAlert方法中使用闭包捕获的旧状态更新数组，导致每次添加告警时都会覆盖之前的内容，而非基于最新状态追加。

修改addAlert中的setAlerts调用，改用函数式更新：

// 原代码
setAlerts([
    ...alerts,
    newAlert
])

// 修改为
setAlerts(prevAlerts => [...prevAlerts, newAlert])

函数式更新会接收当前最新的状态prevAlerts，确保每次都是基于最新的告警数组添加新项，不会丢失之前的告警。

同时，removeAlert方法也需要同步调整，避免闭包问题：

// 修改removeAlert中的setAlerts调用
setAlerts(prevAlerts => prevAlerts.filter((_, index) => index !== targetIndex))

2. 减少AlertProvider不必要的重渲染 #

console.log("Hi")每次打印说明AlertProvider在重复渲染，大概率是父组件（RootLayout）重渲染导致的。可以通过以下方式优化：

缓存Context的value值 #

使用useMemo缓存Context的value，只有当alerts变化时才更新value，避免子组件不必要的重渲染：

const AlertProvider = ({ children }: { children: React.ReactNode }) => {
    console.log("Hi")
    const [ alerts, setAlerts ] = useState<Alert[]>([]);
    // 缓存value
    const contextValue = useMemo(() => ({ alerts, setAlerts }), [alerts]);

    return (
        <AlertContext.Provider value={contextValue}>
            {children}
        </AlertContext.Provider>
    );
};

检查RootLayout的依赖 #

排查RootLayout中是否有动态变化的props，比如inter.className如果是Next.js的字体导入，务必保证字体配置在组件外部定义，避免每次渲染重新创建：

// 正确写法：组件外部定义字体
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }) {
    // ...
}

3. 修复addAlert中的定时器索引问题 #

当前addAlert中的alerts.findIndex依赖闭包中的旧数组，可能导致后续删除时找不到正确索引。可以直接在定时器中用函数式更新过滤：

// 修改addAlert中的定时器部分
const timeoutId = setTimeout(() => {
    setAlerts(prevAlerts => 
        prevAlerts.filter(item => 
            item.type !== alert.type || item.message !== alert.message
        )
    );
}, 10000);

这样直接基于最新状态过滤，避免依赖闭包中的旧数据。

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