[Vue warn]: Error in nextTick: “TypeError: Cannot read properties of null (reading ‘resultDescriptio
1、问题重现:子组件:setBuildValue(value) {console.log(value);// 文本域字数统计this.problemNum =50 - value.swConstructionQuestion.problemDescription.length;this.resultNum =50 - value.swConstructionQuestion.resultDescr
·
1、问题重现:
子组件:
setBuildValue(value) {
console.log(value);
// 文本域字数统计
this.problemNum =
50 - value.swConstructionQuestion.problemDescription.length;
this.resultNum =
50 - value.swConstructionQuestion.resultDescription.length;
this.buildData = value.swConstructionQuestion;
let formData;
let buildValues = {};
this.$nextTick(() => {
formData = this.buildForm.getFieldsValue();
for (let i in formData) {
buildValues[i] =
this.buildData[i] || this.buildData[i] == 0 ? this.buildData[i] : undefined;
typeof buildValues[i] == "string"
? (buildValues[i] = buildValues[i].replace(/(^\s*)|(\s*$)/g, ""))
: "";
}
this.buildForm.setFieldsValue({
...buildValues,
questionTitle: this.buildData && this.buildData.questionTitle != ""? buildValues.questionTitle : "问题上报工单"
});
});
},
父组件:
// 施工阶段施工问题报告-表单赋值
setBuildValue(value) {
if (value) {
this.buildId = value.id;
if (
!value.swConstructionQuestion ||
value.swConstructionQuestion == {}
) {
// 无数据
this.buildFormId = 0;
} else {
this.buildFormId = value.swConstructionQuestion.id;
}
this.getBuildImgs(value);
this.$refs.buildForm.setBuildValue(value);
}
},
2、打印出的value为,其中要使用的数据对象 swConstructionQuestion 为null
3、所以针对于 this.problemNum = 50 - value.swConstructionQuestion.problemDescription.length;就会报错
4、解决:赋值前添加判断
setBuildValue(value) {
console.log(value);
// 文本域字数统计
this.problemNum = value.swConstructionQuestion && value.swConstructionQuestion.problemDescription? 50 - value.swConstructionQuestion.problemDescription.length: 50;
this.resultNum =
50 - value.swConstructionQuestion.resultDescription.length;
this.buildData = value.swConstructionQuestion;
let formData;
let buildValues = {};
this.$nextTick(() => {
formData = this.buildForm.getFieldsValue();
for (let i in formData) {
buildValues[i] =
this.buildData[i] || this.buildData[i] == 0 ? this.buildData[i] : undefined;
typeof buildValues[i] == "string"
? (buildValues[i] = buildValues[i].replace(/(^\s*)|(\s*$)/g, ""))
: "";
}
this.buildForm.setFieldsValue({
...buildValues,
questionTitle: this.buildData && this.buildData.questionTitle != ""? buildValues.questionTitle : "问题上报工单"
});
});
},
5、然后还出现了(因为还有其它没加判断嘛)
6、以为就这样了
setBuildValue(value) {
console.log(value);
// 文本域字数统计
this.problemNum = value.swConstructionQuestion && value.swConstructionQuestion.problemDescription? 50 - value.swConstructionQuestion.problemDescription.length: 50;
this.resultNum = value.swConstructionQuestion && value.swConstructionQuestion.resultDescription? 50 - value.swConstructionQuestion.resultDescription.length: 50;
this.buildData = value.swConstructionQuestion;
let formData;
let buildValues = {};
this.$nextTick(() => {
formData = this.buildForm.getFieldsValue();
for (let i in formData) {
buildValues[i] =
this.buildData[i] || this.buildData[i] == 0 ? this.buildData[i] : undefined;
typeof buildValues[i] == "string"
? (buildValues[i] = buildValues[i].replace(/(^\s*)|(\s*$)/g, ""))
: "";
}
this.buildForm.setFieldsValue({
...buildValues,
questionTitle: this.buildData && this.buildData.questionTitle != ""? buildValues.questionTitle : "问题上报工单"
});
});
},
7、然后还来了:
8、这个问题比较难解决,因为有很多因素,就算把报错的变量注释,报错依然存在
9、以为是缓存问题,最后发现,原来在这儿(表单的第一项就是它)
10、明白了问题所在,就好处理了,最终不报错的代码:
setBuildValue(value) {
console.log(value);
// 文本域字数统计
this.problemNum = value.swConstructionQuestion && value.swConstructionQuestion.problemDescription? 50 - value.swConstructionQuestion.problemDescription.length: 50;
this.resultNum = value.swConstructionQuestion && value.swConstructionQuestion.resultDescription? 50 - value.swConstructionQuestion.resultDescription.length: 50;
this.buildData = value.swConstructionQuestion;
let formData;
let buildValues = {};
this.$nextTick(() => {
if(!this.buildData) {
// 子表单未填写
this.buildForm.setFieldsValue({
questionTitle: "问题上报工单"
});
} else {
formData = this.buildForm.getFieldsValue();
for (let i in formData) {
buildValues[i] =
this.buildData[i] || this.buildData[i] == 0 ? this.buildData[i] : undefined;
typeof buildValues[i] == "string"
? (buildValues[i] = buildValues[i].replace(/(^\s*)|(\s*$)/g, ""))
: "";
}
this.buildForm.setFieldsValue({
...buildValues,
questionTitle: this.buildData.questionTitle && this.buildData.questionTitle != ""? buildValues.questionTitle : "问题上报工单"
});
}
});
},
7、多提一句:不管是针对复杂的数据还是嵌套比较深又或者简单的数据结构,操作数据之前或者使用数据之前都要养成先判断再使用操作的习惯!
愿樱花盛开之时,便是我娶你之日。
更多推荐
所有评论(0)