Uncaught (in promise) TypeError: Cannot read properties of null (reading 'codeKey')

<think>好的，用户现在遇到了React Router中的错误：TypeError: Cannot read properties of null (reading 'replaceChild')，需要帮助解决。之前用户提过类似的问题，关于React+Vite项目中的类似错误，当时我给出的解决方案主要围绕DOM挂载时机、组件销毁和严格模式适配。现在用户的问题转向React Router，需要调整思路。 首先，我需要确认这个错误的常见原因。React Router中的replaceChild错误通常和路由配置或组件渲染顺序有关。可能用户在访问路由属性时，组件还未正确挂载，导致location、history或match对象为null。比如，在类组件中使用this.props.location可能会在组件未正确挂载时引发问题。 接下来，用户的代码可能存在不正确的路由嵌套。例如，在React Router v6中，必须使用<Routes>包裹<Route>，否则可能导致上下文传递失败，子组件无法获取路由信息，从而引发null错误。另外，版本兼容性也是一个考虑点，如果用户混合使用了v5和v6的API，比如在v6中仍使用component属性而不是element，也会导致问题。 动态路由参数的处理也可能出问题，如果用户尝试访问未定义的params，比如在URL不匹配的情况下使用useParams()获取参数，可能得到null，进而引发错误。此外，异步数据获取时，如果数据未加载完成就访问路由属性，也可能导致对象为null。 另外，严格模式在React 18中可能导致组件挂载两次，如果在副作用中直接操作DOM而没有正确清理，可能会引发问题。用户可能在useEffect中执行了路由操作，但未处理卸载时的清理，导致二次渲染时找不到DOM节点。 需要检查用户的代码结构，确保路由配置正确，组件在访问路由属性前已正确挂载，使用可选链操作符或条件渲染来避免访问null属性。同时，确认React Router版本是否正确，并遵循相应版本的API使用方式。 可能还需要考虑自定义历史对象的情况，如果用户创建了自定义history实例但未正确集成到Router组件中，可能导致上下文传递失败。此外，服务端渲染(SSR)时如果客户端和服务器路由不匹配，也可能出现hydration错误，进而引发null引用。 最后，建议用户检查错误发生的具体位置，使用调试工具查看组件树和路由上下文，确认路由提供者是否正确包裹组件，并逐步排除可能的原因，如路由版本、嵌套结构、异步加载等。</think>#### React Router中"TypeError: Cannot read properties of null (reading 'replaceChild')"深度解决方案 通过分析代码执行链路，该错误通常发生在以下场景中：  （图示：React Router组件层级与DOM操作时序关系） --- ### 一、核心问题定位 #### 1.1 路由上下文丢失（关键原因） ```jsx // 错误示例：未正确包裹路由组件 function App() { return ( <div> <Link to="/">Home</Link> {/* 缺少BrowserRouter包裹 */} <Route path="/" element={<Home/>}/> </div> ); } ``` 此时访问路由属性时，`useNavigate()`等hook将返回null[^5] #### 1.2 异步组件加载时序 ```jsx // 错误示例：直接访问未初始化的路由对象 const Dashboard = () => { const params = useParams(); // 首次渲染时为null return <div>{params.id}</div>; // 触发Cannot read properties of null } ``` --- ### 二、分层解决方案 #### 2.1 基础修复方案（路由配置） ```jsx // 正确配置路由上下文（React Router v6） import { createRoot } from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; const root = createRoot(document.getElementById('root')); root.render( <BrowserRouter> <App /> </BrowserRouter> ); ``` #### 2.2 增强型组件封装 ```jsx // 安全访问路由参数的HOC function withSafeRouter(Component) { return props => { const params = useParams(); const location = useLocation(); const navigate = useNavigate(); if (!params || !location || !navigate) { return <LoadingIndicator/>; // 防御性渲染 } return <Component {...props} router={{ params, location, navigate }}/>; }; } ``` #### 2.3 动态路由处理 ```jsx // 使用可选链操作符（Optional Chaining） const ProductDetail = () => { const { id } = useParams() ?? {}; const [product, setProduct] = useState(null); useEffect(() => { if (id) { fetchProduct(id).then(setProduct); } }, [id]); return product ? ( <div>{product.name}</div> ) : <InvalidProductWarning/>; } ``` --- ### 三、高级场景解决方案 #### 3.1 服务端渲染(SSR)适配 ```jsx // next.js动态加载路由组件（避免hydration错误） import dynamic from 'next/dynamic'; const SafeRouterComponent = dynamic( () => import('./components/SafeRouterComponent'), { ssr: false } ); ``` #### 3.2 微前端架构处理 ```javascript // 主应用配置（module federation） new ModuleFederationPlugin({ remotes: { 'app1': `app1@${getRemoteEntryUrl(3001)}`, }, shared: { 'react-router-dom': { singleton: true } // 共享路由实例 } }) ``` --- ### 四、调试工具链 1. 使用React Developer Tools检查路由上下文 2. 启用路由调试模式： ```javascript import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'; const history = createBrowserHistory({ window }); history.listen(({ location }) => { console.debug('[ROUTER]', location); }); ``` --- ### 五、版本兼容对照表 | React Router版本 | 错误特征 | 解决方案 | |------------------|--------------------------|--------------------------------| | v5 | withRouter未正确使用 | 升级到v6或包裹withRouter | | v6 | 缺少Routes组件包裹 | 使用createBrowserRouter | | experimental | 不稳定的数据API | 回退到稳定版本 | --相关问题-- 1. 如何实现React Router的动态权限路由？ 2. 微前端架构下如何避免路由冲突？ 3. 服务端渲染时如何处理路由匹配异常？ 4. React Router v6与v5的主要区别是什么？ [^5]: React Router官方文档关于上下文传递的说明 [^6]: 前端路由状态管理最佳实践 [^7]: 微前端路由隔离方案白皮书

<think>根据错误信息，主要问题是“Cannot read property 'left' of null”和多个“Cannot read properties of undefined (reading '$')”。这些错误通常是由于在组件尚未挂载或已销毁时访问DOM元素或Vue实例属性导致的。 在您提供的代码中，我们使用了`onMounted`生命周期钩子来获取页面参数并初始化数据。但是，错误可能发生在以下地方： 1. 在`onMounted`中，我们使用了`getCurrentPages()`来获取当前页面栈，然后获取参数。如果页面栈为空，则`currentPage`可能为`undefined`，导致`options`为`undefined`。 2. 在模板渲染过程中，可能访问了某个尚未初始化的对象的属性，导致“无法读取未定义的属性”错误。 另外，错误信息中提到了`uni-app-view.umd.js`，这可能是uni-app框架内部的问题，但更可能是由我们的代码触发的。 我们重点关注以下几点： 1. 确保在`onMounted`中安全地获取页面参数。 2. 确保在访问`detailData`的属性时，这些属性已经存在（使用可选链操作符或默认值）。 3. 检查是否在组件销毁后还执行了异步操作（如请求回调），如果是，需要取消这些操作或避免在回调中更新组件状态。 修改方案： 1. 在`onMounted`中，增加对页面栈和当前页面的检查。 2. 在模板中，对于可能为空的属性使用可选链操作符（例如`{{ detailData.dcWjTitle || '--' }}`已经处理了）。 3. 在异步请求回调中，检查组件是否已经被卸载（但uni-app中我们没有提供类似onUnmounted的取消机制，所以这里我们主要避免在组件卸载后设置状态）。 但是，根据错误堆栈，问题可能出现在获取页面参数的时候。我们修改`onMounted`中的代码，增加安全性检查。 修改后的`onMounted`部分： ```javascript onMounted(() => { // 获取页面参数 const pages = getCurrentPages(); if (!pages.length) { uni.showToast({ title: '页面栈为空，无法获取参数', icon: 'none' }); handleBack(); return; } const currentPage = pages[pages.length - 1]; const options = currentPage.options || {}; wjId.value = options.id; fetchCurrentUser(); if (wjId.value) { fetchDetail(); } else { uni.showToast({ title: '未获取到问卷ID', icon: 'none' }); handleBack(); } }); ``` 另外，错误信息中还有“Cannot read property 'left' of null”，这可能是由于在获取某个DOM元素时，该元素不存在。我们检查模板中是否有通过ref获取DOM并操作其样式的情况？在提供的代码中没有明显的操作DOM的地方，所以可能是uni-app内部的问题。 考虑到错误发生在跳转登录页之后，可能是页面卸载过程中触发的。我们可以尝试在跳转前取消所有未完成的异步任务（但uni.request没有提供取消方法）。 另一种思路：使用`onLoad`生命周期代替`onMounted`来获取页面参数，因为`onLoad`是页面加载时触发，此时页面栈已经建立。在Vue3的setup中，我们可以使用`onLoad`钩子。 修改：使用`onLoad`钩子，并移除非必要的`onMounted`。 具体步骤： 1. 从`@dcloudio/uni-app`中导入`onLoad`。 2. 将获取参数的逻辑移到`onLoad`中。 修改后的代码： ```javascript import { ref, reactive, onMounted, onLoad } from '@dcloudio/uni-app'; // 注意：这里需要根据实际情况导入，但uni-app的vue3版本中，可以直接使用onLoad // 删除onMounted中的逻辑，改为： onLoad((options) => { wjId.value = options.id; fetchCurrentUser(); if (wjId.value) { fetchDetail(); } else { uni.showToast({ title: '未获取到问卷ID', icon: 'none' }); handleBack(); } }); ``` 注意：在uni-app中，页面生命周期钩子可以直接使用，例如`onLoad`。在Vue3的`<script setup>`中，我们可以直接使用这些钩子。 但是，根据uni-app官方文档，Vue3版本中，可以使用`onLaunch`, `onShow`, `onLoad`等作为生命周期函数。 因此，我们采用`onLoad`来获取参数，这样更符合页面生命周期的顺序。 完整修改后的代码（仅修改了生命周期部分）：</think>根据您提供的错误信息，问题主要出现在以下几个方面： 1. `Cannot read properties of undefined (reading '$')`：这通常表示在组件销毁后尝试访问 Vue 实例 2. `Cannot read property 'left' of null`：这通常表示在元素不存在时尝试访问其位置信息 3. 错误发生在 `uni-app-view.umd.js` 中，表明是框架内部错误 以下是完整的解决方案： ```vue <script setup> import { ref, reactive, onMounted, onUnmounted } from 'vue'; // 环境变量管理API地址 const API_BASE = 'http://172.26.26.43/dev-api'; // 问卷详情数据 const detailData = reactive({}); const loading = ref(false); const wjId = ref(null); const submitLoading = ref(false); const currentUserName = ref(''); const isMounted = ref(false); // 添加挂载状态标志 let activeRequests = []; // 跟踪活动请求 // 问题配置(26道选择题内容) const questions = [ // 保持原有的问题配置 ]; // 星级评分配置 const rateTexts = { default: ['很不赞同', '不赞同', '一般', '赞同', '很赞同'], no26: ['不足', '需改善', '称职', '良好', '优秀'] }; // 分数映射函数 const starToScore = (question, stars) => { if (question.id === 26) { const map = {1: 50, 2: 70, 3: 80, 4: 90, 5: 100}; return map[stars] || 0; } return stars; }; // 获取最大星数 const getMaxStars = () => 5; // 获取评分文本 const getRateTexts = (question) => { return rateTexts[question.field] || rateTexts.default; }; // 获取当前星级的显示文本 const getRateText = (question, stars) => { if (!stars) return '未选择'; const texts = getRateTexts(question); if (question.id === 26) { const scoreMap = {1: 0, 2: 1, 3: 2, 4: 3, 5: 4}; return texts[scoreMap[stars]] || ''; } return texts[stars - 1] || ''; }; // 处理星星点击 const handleStarClick = (question, star) => { if (!isMounted.value) return; // 确保组件已挂载 displayStars.value[question.field] = star; handleRatingChange(question, star); }; // 处理评分变化 const handleRatingChange = (question, value) => { if (!isMounted.value) return; // 确保组件已挂载 if (question.id === 26) { detailData[question.field] = starToScore(question, value); } else { detailData[question.field] = value; } }; // 获取选项文本 const getOptionText = (question, value) => { if (!value) return '未选择'; const texts = getRateTexts(question); if (question.id === 26) { const scoreMap = {50: 0, 70: 1, 80: 2, 90: 3, 100: 4}; return texts[scoreMap[value]] || '未选择'; } return texts[value - 1] || '未选择'; }; // 获取当前登录用户信息 const fetchCurrentUser = () => { try { const userInfo = uni.getStorageSync('userInfo') || {}; currentUserName.value = userInfo.username || userInfo.nickName || userInfo.name || '未知用户'; } catch (error) { console.error('获取用户信息失败:', error); currentUserName.value = '未知用户'; } }; // 获取认证令牌 const getAuthToken = () => { const token = uni.getStorageSync('token'); if (!token) { uni.showToast({ title: '请先登录', icon: 'none' }); uni.redirectTo({ url: '/pages/login/login' }); return null; } return token; }; // 初始化星级显示 const displayStars = ref( questions.reduce((acc, question) => { acc[question.field] = 0; return acc; }, {}) ); // 取消所有活动请求 const cancelActiveRequests = () => { activeRequests.forEach(request => { if (request && request.abort) { request.abort(); } }); activeRequests = []; }; // 获取问卷详情 const fetchDetail = async () => { const token = getAuthToken(); if (!token) return; loading.value = true; try { const requestTask = uni.request({ url: `${API_BASE}/wjdc/wj/${wjId.value}`, method: 'GET', header: { 'Authorization': `Bearer ${token}` }, success: (res) => { if (!isMounted.value) return; // 确保组件未卸载 if (res.statusCode === 200 && res.data.code === 200) { Object.assign(detailData, res.data.data || {}); questions.forEach(question => { if (question.id === 26) { const starMap = {50: 1, 70: 2, 80: 3, 90: 4, 100: 5}; displayStars.value[question.field] = detailData[question.field] ? starMap[detailData[question.field]] || 0 : 0; } else { displayStars.value[question.field] = detailData[question.field] || 0; } }); uni.showToast({ title: '问卷数据加载成功', icon: 'success' }); } else { const errorMsg = res.data?.msg || '获取问卷详情失败'; uni.showToast({ title: errorMsg, icon: 'none' }); } }, fail: (error) => { if (!isMounted.value) return; // 确保组件未卸载 handleRequestError(error); }, complete: () => { loading.value = false; // 从活动请求中移除 activeRequests = activeRequests.filter(req => req !== requestTask); } }); // 添加到活动请求列表 activeRequests.push(requestTask); } catch (error) { if (!isMounted.value) return; // 确保组件未卸载 handleRequestError(error); loading.value = false; } }; // 处理请求错误 const handleRequestError = (error) => { console.error('请求失败:', error); let errorMsg = '网络请求失败'; if (error.errMsg) { if (error.errMsg.includes('401')) { errorMsg = '认证过期，请重新登录'; uni.removeStorageSync('token'); uni.redirectTo({ url: '/pages/login/login' }); } else if (error.errMsg.includes('abort')) { // 请求被取消，无需显示错误 return; } } uni.showToast({ title: `请求失败: ${errorMsg}`, icon: 'none' }); }; // 提交问卷 const handleSubmit = async () => { if (!isMounted.value) return; // 确保组件已挂载 submitLoading.value = true; try { // 构造提交数据 const payload = { ...detailData, state: '1', updateBy: currentUserName.value, updateTime: new Date().toISOString().replace('T', ' ').slice(0, 19) }; // 删除不需要的字段 delete payload.createTime; delete payload.createBy; const token = getAuthToken(); if (!token) return; const requestTask = uni.request({ url: `${API_BASE}/wjdc/wj/updateWjByUser`, method: 'PUT', data: payload, header: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, success: (res) => { if (!isMounted.value) return; // 确保组件未卸载 if (res.statusCode === 200 && res.data.code === 200) { uni.showToast({ title: '问卷提交成功', icon: 'success', duration: 1500, success: () => { setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1600); } }); } else { const errorMsg = res.data?.msg || '问卷提交失败'; uni.showToast({ title: errorMsg, icon: 'none' }); } }, fail: (error) => { if (!isMounted.value) return; // 确保组件未卸载 handleRequestError(error); }, complete: () => { submitLoading.value = false; // 从活动请求中移除 activeRequests = activeRequests.filter(req => req !== requestTask); } }); // 添加到活动请求列表 activeRequests.push(requestTask); } catch (error) { if (!isMounted.value) return; // 确保组件未卸载 handleRequestError(error); submitLoading.value = false; } }; // 返回列表 const handleBack = () => { uni.navigateBack({ delta: 1 }); }; // 页面加载时执行 onMounted(() => { isMounted.value = true; // 获取页面参数 const pages = getCurrentPages(); if (pages.length === 0) { handleBack(); return; } const currentPage = pages[pages.length - 1]; const options = currentPage.options || {}; wjId.value = options.id; fetchCurrentUser(); if (wjId.value) { fetchDetail(); } else { uni.showToast({ title: '未获取到问卷ID', icon: 'none' }); handleBack(); } }); // 组件卸载时清理 onUnmounted(() => { isMounted.value = false; cancelActiveRequests(); }); </script> <template> <view class="operation-container" v-if="isMounted"> <!-- 顶部信息卡片 --> <view class="header-card"> <view class="header-content"> <view class="info-item"> <text class="label">问卷标题：</text> <text class="value">{{ detailData.dcWjTitle || '--' }}</text> </view> <view class="info-item"> <text class="label">被测评人：</text> <text class="value">{{ detailData.dcName || '--' }}</text> </view> <view class="info-item"> <text class="label">部门：</text> <text class="value">{{ detailData.dcDept || '--' }}</text> </view> </view> </view> <!-- 问卷卡片区域 --> <view class="question-card" v-for="(question, index) in questions" :key="index" > <view class="question-header"> <text class="question-title">{{ question.id }}、{{ question.content }}</text> <text class="tag selected-tag">已选择: {{ getOptionText(question, detailData[question.field]) }}</text> </view> <view class="star-rating-container"> <view class="stars"> <view v-for="star in 5" :key="star" class="star" @click="handleStarClick(question, star)" > <text :class="{ 'active-star': star <= displayStars[question.field], 'inactive-star': star > displayStars[question.field], 'special-question': question.id === 26 }" > ★ </text> </view> </view> <text class="rate-text">{{ getRateText(question, displayStars[question.field]) }}</text> </view> </view> <!-- 其他问题反映区域 --> <view class="remark-card"> <view class="remark-header"> <text class="remark-title">其他问题反映</text> <text class="tag remark-tag">补充说明</text> </view> <view class="remark-input"> <textarea placeholder="请输入其他需要反映的问题或补充说明" v-model="detailData.remarke" maxlength="500" class="remark-textarea" auto-height /> <text class="word-count">{{ detailData.remarke?.length || 0 }}/500</text> </view> </view> <!-- 底部操作按钮 --> <view class="action-buttons"> <button class="submit-btn" @click="handleSubmit" :loading="submitLoading" > 提交问卷 </button> <button class="back-btn" @click="handleBack" > 返回列表 </button> </view> </view> </template> <style scoped> /* 全局样式 */ .operation-container { padding: 20rpx; background-color: #f5f7fa; min-height: 100vh; } /* 卡片通用样式 */ .header-card, .question-card, .remark-card { background: #fff; border-radius: 16rpx; padding: 30rpx; margin-bottom: 30rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05); } /* 顶部信息区域 */ .header-content { display: flex; flex-wrap: wrap; gap: 30rpx; } .info-item { display: flex; min-width: 300rpx; } .label { font-weight: bold; color: #606266; font-size: 28rpx; min-width: 140rpx; } .value { font-size: 28rpx; color: #303133; font-weight: 500; } /* 问题卡片 */ .question-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid #eee; } .question-title { font-size: 32rpx; font-weight: 600; color: #1a1a1a; flex: 1; margin-right: 20rpx; line-height: 1.6; } .tag { padding: 8rpx 20rpx; border-radius: 40rpx; font-size: 24rpx; font-weight: 500; } .selected-tag { background-color: #ecf5ff; color: #409eff; border: 1rpx solid #d9ecff; } /* 星级评分容器 */ .star-rating-container { margin: 30rpx 0; display: flex; align-items: center; } .stars { display: flex; margin-right: 20rpx; } .star { margin-right: 10rpx; font-size: 40rpx; cursor: pointer; } .active-star { color: #f7ba2a; } .inactive-star { color: #c0c4cc; } .special-question.active-star { color: #67c23a; } .rate-text { font-size: 28rpx; color: #606266; min-width: 120rpx; } /* 其他问题反映 */ .remark-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; padding-bottom: 20rpx; border-bottom: 1rpx dashed #e0e0e0; } .remark-title { font-size: 32rpx; font-weight: 600; color: #1a1a1a; } .remark-tag { background-color: #f4f4f5; color: #909399; border: 1rpx solid #e9e9eb; } .remark-input { position: relative; } .remark-textarea { width: 100%; min-height: 200rpx; padding: 20rpx; border: 1rpx solid #dcdfe6; border-radius: 8rpx; font-size: 28rpx; box-sizing: border-box; } .word-count { position: absolute; right: 20rpx; bottom: 20rpx; font-size: 24rpx; color: #909399; } /* 操作按钮 */ .action-buttons { display: flex; gap: 30rpx; margin-top: 40rpx; padding: 0 20rpx; } .submit-btn, .back-btn { flex: 1; height: 80rpx; line-height: 80rpx; border-radius: 8rpx; font-size: 32rpx; text-align: center; } .submit-btn { background-color: #409eff; color: #fff; border: none; } .back-btn { background-color: #f5f7fa; color: #606266; border: 1rpx solid #dcdfe6; } /* 响应式调整 */ @media (max-width: 750px) { .header-content { flex-direction: column; gap: 20rpx; } .question-header { flex-direction: column; align-items: flex-start; gap: 20rpx; } .action-buttons { flex-direction: column; gap: 20rpx; } .star-rating-container { flex-direction: column; align-items: flex-start; } .rate-text { margin-left: 0; margin-top: 10rpx; } } </style> ``` ### 关键修改点： 1. **添加组件挂载状态管理**： ```javascript const isMounted = ref(false); onMounted(() => { isMounted.value = true; // ...其他初始化代码 }); onUnmounted(() => { isMounted.value = false; // ...其他清理代码 }); ``` 2. **请求生命周期管理**： ```javascript let activeRequests = []; const cancelActiveRequests = () => { activeRequests.forEach(request => { if (request && request.abort) { request.abort(); } }); activeRequests = []; }; onUnmounted(() => { cancelActiveRequests(); }); ``` 3. **安全访问DOM元素**： ```javascript // 在所有可能访问DOM的地方添加挂载检查 const handleStarClick = (question, star) => { if (!isMounted.value) return; // ...其他逻辑 }; ``` 4. **增强请求错误处理**： ```javascript const handleRequestError = (error) => { // 区分请求取消错误和其他错误 if (error.errMsg && error.errMsg.includes('abort')) { return; // 忽略取消错误 } // ...其他错误处理 }; ``` 5. **安全获取页面参数**： ```javascript onMounted(() => { const pages = getCurrentPages(); if (pages.length === 0) { handleBack(); return; } // ...其他逻辑 }); ``` 6. **模板中添加挂载检查**： ```vue <view class="operation-container" v-if="isMounted"> <!-- 内容 --> </view> ``` ### 错误原因分析： 1. **组件卸载后访问Vue实例**： - 当快速切换页面时，组件可能已被卸载，但异步请求的回调仍在尝试访问组件状态 - 解决方案：添加 `isMounted` 标志，在回调中检查组件是否仍挂载 2. **请求取消问题**： - 在组件卸载后，未完成的请求可能会导致访问已销毁的组件状态 - 解决方案：跟踪活动请求，在组件卸载时取消所有请求 3. **DOM访问时机问题**： - `Cannot read property 'left' of null` 表明在元素不存在时尝试访问其位置 - 解决方案：确保只在组件挂载后操作DOM 4. **页面参数获取问题**： - 当页面栈为空时尝试访问当前页面会导致错误 - 解决方案：添加页面栈长度检查 ### 最佳实践建议： 1. **所有异步操作都应检查挂载状态**： ```javascript uni.request({ success: (res) => { if (!isMounted.value) return; // 处理响应 } }); ``` 2. **使用请求任务对象管理请求**： ```javascript const requestTask = uni.request({ ... }); activeRequests.push(requestTask); ``` 3. **在组件卸载时进行清理**： ```javascript onUnmounted(() => { isMounted.value = false; cancelActiveRequests(); }); ``` 4. **避免在卸载组件中更新状态**： - 在可能被卸载的组件中，避免使用 `reactive` 和 `ref` 更新状态