<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` 更新状态
本文详细记录了解决ExtJS框架中因数据加载引发的'uncaught typeerror cannot read property'错误的过程，通过调整HTTP代理URL配置成功解决了问题。
扫一扫
1941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
