vue3 - 实现编辑当前行内容并保存修改功能时，为什么数据传着传着就变了？

Question

为什么数据传着传着变了?

页面结构

• 组件A

  • 组件B1 => 用于设置过滤条件和进行过滤
  • 组件B2 => 表格，显示过滤的结果，表格中还有一个列可以用于操作对应行数据的编辑和删除
  • 组件B3 => 弹出编辑当前行的表单

我在实现编辑当前行内容并保存功能的时候遇到了些问题，以下是我的实现思路和问题。

在组件A中我声明了一个响应式数据，用于跟踪当前行的数据

const editingEquipmentLedgerForm = ref();function setEditingEquipmentLedgerForm(newValue) {  editingEquipmentLedgerForm.value = newValue;}

还有一个方法用于处理点击编辑按钮事件，它将会被传给组件B(表格显示)

function handleEdit(idx, row) {  // todo: 编辑当前行  console.log("edit current row: ", idx, row);  setEditingEquipmentLedgerForm({...toRaw(row)});  console.log("handleEdit: editingEquipmentLedgerForm: ", editingEquipmentLedgerForm);  // 打开编辑弹窗  openEditEquipmentLedgerDrawer();}

当前编辑的行数据会被传给组件B3(编辑弹窗)，当我们打开编辑弹窗的时候，对应行的内容就显示在弹窗中的表单里了。

 <EditEquipmentLedgerDrawer    :startLoading="startLoading"    :endLoading="endLoading"    :postEditedEquipmentLedger="postEditedEquipmentLedger"    :editingEquipmentLedgerForm="editingEquipmentLedgerForm"    :closeEditEquipmentLedgerDrawer="closeEditEquipmentLedgerDrawer"    v-model:showEditEquipmentLedgerDrawer="showEditEquipmentLedgerDrawer"  />

但是当我修改之后，点击保存的时候，就报错了。从我打印的数据可以看到当前修改行的数据变成undefined了。

async function saveEditedEquipmentLedger(formInstance) {  // todo: 保存新的设备台账信息  if (!formInstance) return;  console.log("formInstance data: ", formInstance);  await formInstance.validate(async (valid, fields) => {    console.log("validate form: ", valid, fields);    if (valid) {      console.log("submit");      // todo: 需要对表单数据进行处理      try {        console.log("editingEquipmentLedgerForm: ", editingEquipmentLedgerForm);        postEditedEquipmentLedger(extractEditedEquipmentLedgerFormData(editingEquipmentLedgerForm));        // 模拟: 上传加载，提示上传成功，然后关闭drawer        startLoading();        await sleep(1);        endLoading();        ElMessage({          message: "设备台账修改成功，您现在可以点击查询获取最新的数据了!",          type: "success",          duration: 1000        })        closeEditEquipmentLedgerDrawer();        formInstance.resetFields();      } catch (error) {        ElMessage({          message: `设备台账修改失败 ${error.message}`,          type: "error",          duration: 1000        })      }    } else {      // 提示验证失败      console.log("error submit", fields);    }  })}

• 为什么会出现这样的问题呢？该怎么解决呢？
• 我实现编辑保存的方式合理吗？这个组件划分的合理吗？参数传递合理吗？是不是把简单问题变得复杂了？

附：

• github
• stackblitz

Answer 1

这里给的默认值是undefined

所以子组件初始化接受的这个值就是undefined

因为你组件里的editingEquipmentLedgerForm和传过去的editingEquipmentLedgerForm没有关联关系，所以组件里的editingEquipmentLedgerForm没有随着父元素的editingEquipmentLedgerForm改变而改变。

你可以使用const props = defineProps(...);声明总的props，在需要的地方使用props.xxx取值。或者在EditEquipmentLedgerDrawer组件上使用v-if，在openEditEquipmentLedgerDrawer的时候在渲染这个组件

Answer 2

没仔细看，提醒两个点

1. console.log(obj) 的输出不是当时的值，而是在查看的时候 obj 的值（尤其是属性）。如果想输出当时的时候，用 console.log(JSON.stringify(obj))，先序列化出来再输出，或者只取其中部分属性（取到原始类型为止）输出
2. 如果一个对象在使用的时候不是预期，有可能是在其他地方修改了。一般传递对象的时候，都是传递的对象的引用。既然是引用，那在某个地方修改了属性值，所以通过引用访问的属性都是修改后的。如果想不受影响，需要使用深拷贝（或一定深度的拷贝）