React useEffect在Azure生产环境卸载时触发异常求助

先看你代码里的几个核心问题，这就是本地正常、Azure部署后出问题的原因：

1. useEffect没正确调用getContacts #

你当前的useEffect写法：

useEffect(() => getContacts, [getContacts])

这里只是把getContacts函数返回了，根本没执行它！本地开发模式下可能因为React Strict Mode的重复渲染偶然触发了执行，但Azure的生产环境优化后，只有浏览器返回触发组件重新挂载时才意外执行到。

正确写法二选一：

// 写法1：调用函数
useEffect(() => getContacts(), [getContacts])
// 写法2：直接传函数引用
useEffect(getContacts, [getContacts])

2. useCallback依赖项缺失导致闭包陷阱 #

你的getContacts用了useCallback但依赖项是空数组，但函数内部用到了id、contacts、props.selectedPartnerContactId这些外部变量，这会让函数一直捕获组件初始渲染时的旧值，后续变量更新后也不会触发useEffect重新执行。

优化方案：

• 用函数式更新处理contacts，这样不需要把contacts加入依赖：

const getContacts = useCallback(
  () => {
    getAvailablePartnerContacts(id!.toString()).then(
        partnerContacts => {
            const _partnerContacts = partnerContacts.map(
                pContact => ({
                    value: pContact.id|| "",
                    key: `${pContact.firstName} ${pContact.lastName}`
                })
            );
            // 函数式更新获取最新状态
            setContacts(prev => [...prev, ..._partnerContacts])
            setPreselectedId(props.selectedPartnerContactId || "None");
        })
  },[id, props.selectedPartnerContactId]) // 只加用到的外部依赖

3. 本地与生产环境的差异 #

Azure部署的生产环境开启了代码压缩、React生产模式，禁用了开发环境的调试冗余逻辑，这会让本地开发时的偶然“正常”表现消失。另外浏览器返回时的路由切换会触发组件卸载/重新挂载，这时候useEffect会强制执行，才让你看到debugger触发。

验证建议 #

先在本地执行生产构建（比如npm run build），然后用本地服务跑构建后的代码，这样能复现Azure部署后的环境，方便调试问题，避免反复部署。

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