element-ui form 表单字段报错错误原因分析

这个问题倒不是我自己犯的，但新入职的前端实习生刚走出校园，犯错是在所难免的，多知道一些奇葩的错误，后续排查错误也可以省下些时间和精力

一个页面上有很多表单，而渲染的表单是根据类型字段来的，不是这个类型对应字段就不会有值，设置默认值之后就不会报错了（如果是 厂房租赁 类型，则展示 厂房租赁 的表单，如果是 讲解预约服务 类型，则展示 讲解预约服务 的表单，其他表单隐藏）

页面需要一些基础字段来确保 dom 渲染不报错，在 data 里申明过了，而页面还是会报错，仔细梳理页面渲染过程才发现了罪魁祸首 this.dataForm = res.data 这一赋值将原来的初始值直接干掉了，dom 上读不到属性自然就报错了

<!-- 厂房租赁 -->
<div v-if="showplantInfoVO">
  <el-col :span="24">
    <el-form-item label="意向厂房" prop="plant">
      <el-input v-model=" dataForm.plantInfoVO.plant" placeholder="请输入" clearable :style='{"width":"100%"}'>
      </el-input>
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="期望价格(元)" prop="price">
      <el-input v-model=" dataForm.plantInfoVO.price" placeholder="请输入" clearable :style='{"width":"100%"}'>
      </el-input>
    </el-form-item>
  </el-col>
</div>

<!-- 讲解预约服务 -->
<div v-if="showexplainInfoVo">
  <el-col :span="24">
    <el-form-item label="联系人姓名" prop="name">
      <el-input v-model=" dataForm.explainInfoVo.name" placeholder="请输入" clearable :style='{"width":"100%"}'>
      </el-input>
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="联系人电话" prop="phoneNumber">
      <el-input v-model=" dataForm.explainInfoVo.phoneNumber" placeholder="请输入" clearable :style='{"width":"100%"}'>
      </el-input>
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="预约时间" prop="explainTime">
      <el-input v-model=" dataForm.explainInfoVo.explainTime" placeholder="请输入" clearable :style='{"width":"100%"}'>
      </el-input>
    </el-form-item>
  </el-col>
</div>

<script>
  import request from '@/utils/request'
  export default {
    data() {
      return {
        dataForm: {
          id: "",
          openid: "",
          servicetype: "",
          plantInfoVO: {
            id: "",
            plant: "",
            price: "",
            serviceapplyid: "",
            servicetype: ""
          },
          explainInfoVo: {
            name: "", //姓名
            phoneNumber: "", //联系电话
            explainTime: null, //预约时间
            serviceapplyid: "",
            servicetype: ""
          },
          // ...
        }
      }
    },

    methods: {
      init (id) {
        this.dataForm.id = id || 0;
        this.$nextTick(() => {
          if (this.dataForm.id) {
            this.loading = true
            request({
              url: '/api/example/ServiceApply/' + this.dataForm.id,
              method: 'get'
            }).then(res => {

              /* res.data
              {
                id: "xx",
                openid: "xxxxxxxxxxx",
                servicetype: "1",
                plantInfoVO: {
                  id: "xxxxxxx",
                  plant: "xxxxxxxxx",
                  price: "xxxxxxxx",
                  serviceapplyid: "xxxxxxxxxxx",
                  servicetype: "xxxxxxxx"
                },
                createUser: "fffffffffff",
                unusefullfield: "22222"
              }
              */
              
              // ***************** 引起错误的代码 *****************
              // this.dataForm = res.data

              // ***************** 正确写法：利用扩展运算符来覆盖已有属性 *****************
              let { createUser, unusefullfield, ...baseInfo } = res.data // 将不需要的字段显示声明过滤掉，其他字段都放在 baseInfo 里，后面通过解构赋值将其赋值给 dataForm
              this.dataForm = { ...this.dataForm, ...baseInfo } // this.dataForm 和 baseInfo 有相同字段时 baseInfo 里的字段会覆盖掉 this.dataForm 里的（后面的覆盖前面的）

              let jsonstr = res.data.datasInfoVO.jsonstr
              let jsonobj = JSON.parse(jsonstr);
              if (res.data.servicetype == "厂房租赁价格代谈") {
                this.dataForm.plantInfoVO = { ...jsonobj }
                this.showplantInfoVO = true
                this.showexplainInfoVo = false
              }

              if (res.data.servicetype == "讲解预约服务") {
                this.dataForm.explainInfoVo = { ...jsonobj }
                this.showexplainInfoVo = true
                this.showplantInfoVO = false
              }

              this.visible = true;
              this.loading = false
            })
          }
        })

      },
    }
</script>