表不再更新为firebase，React

Question

我最近更改了将数据传递到表中的方式。我正在使用一个类将数据传递给组件。

export function EmployeeClass(data) {
  if (typeof data.first_name !== "undefined" && data.first_name) {
    this.first_name = data.first_name;
  } else {
    this.first_name = "";
  }
  if (typeof data.last_name !== "undefined" && data.last_name) {
    this.last_name = data.last_name;
  } else {
    this.last_name = "";
  }

this.getData = () => {
    var data = {};
    data.first_name = this.first_name;
    data.last_name = this.last_name;
return data

然后我在主要组件中调用一个函数以从Firestore DB中获取所有雇员

function getEmployees() {
    let ref = firestoreDb
      .collection("users")
      .doc(uid)
      .collection("employees");
    // .where("store_id", "==", currentStore.id);
    firestoreRead(ref).then(
      snapshot => {
        let newEmployees = [];
        snapshot.forEach(function(doc) {
          // doc.data() is never undefined for query doc snapshots
          let employeeData = doc.data();
          employeeData["id"] = doc.id;
          employeeData["default_department"] = false;
          let newEmployee = new EmployeeClass(employeeData);
          newEmployees.push(newEmployee);
        });
        newEmployees.sort((a, b) => {
          return a.last_name < b.last_name;
        });
        setEmployees(newEmployees);
      },
      [userId]
    );
  }

然后，此数据将传递到呈现在屏幕上的表格组件。该部分仍然可以正常工作，因为所有员工及其数据在表上都可见，所以更新组件无效。

保存时，我调用此updateEmployee函数来调用我的Firestore更新。当我console.lognewData如下所示，它吐出的是已经填充表格的数据，而不是我要查找的更新数据。

function updateEmployee() {
    let newData = props.employee.getData();

    let deptRef = firestoreDb
      .collection("users")
      .doc(userId)
      .collection("employees")
      .doc(props.employee.id);
    firestoreUpdate(deptRef, newData)
      .then(doc => console.log(newData))
      .catch(err => console.log(err));
  }

Answer 1

如果我正确理解了您的意图，则希望updateEmployee()用存储在数据库中的数据刷新表中的数据。

A Firestore update operation是写入操作的一种特殊类型，它使您可以修改文档的特定属性，而不必使用设置操作覆盖整个文档。在当前的updateEmployee()功能中，您将客户端设备上拥有的数据提取并将其上传到服务器，而不是将数据从服务器读回到设备。

由于在Firestore中update的特殊含义，我建议将函数重命名为refreshEmployee()。

function refreshEmployee() {
    let employeeRef = firestoreDb
      .collection("users")
      .doc(userId)
      .collection("employees")
      .doc(props.employee.id);

    employeeRef.get()
      .then((doc) => {
          if (!doc.exists) { throw 'not found'; }

          let latestData = doc.data();
          props.employee.first_name = latestData.first_name || "";
          props.employee.last_name = latestData.last_name || "";
          console.log('Refreshed data: ' + JSON.stringify(props.employee.getData()));

          // TODO: update values displayed in table
      })
      .catch(err => console.log(err));
}

---

其他说明

我会考虑将刷新操作移到EmployeeClass内部，以便使用服务器中的新数据进行更新本身就像props.employee.refresh()一样简单。这将意味着在EmployeeClass构造函数中传递数据库引用。

在Javascript中，以下代码提供了逻辑：

if (typeof data.last_name !== "undefined" && data.last_name) {
  this.last_name = data.last_name;
} else {
  this.last_name = "";
}

可以压缩为this.last_name = data.last_name || "";，其效果与如果data.last_name为undefined或falsy时降到""的值相同。