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、多提一句:不管是针对复杂的数据还是嵌套比较深又或者简单的数据结构,操作数据之前或者使用数据之前都要养成先判断再使用操作的习惯!

愿樱花盛开之时,便是我娶你之日。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐