时间戳

首页 > 解决方案 > 反应：更新 Firestore 文档中的一条数据会导致所有其他数据被空字符串覆盖

javascript - 反应：更新 Firestore 文档中的一条数据会导致所有其他数据被空字符串覆盖

问题描述

更新数据需要我在我的 Firestore 文档中输入每个单独的数据。

编辑标签号将导致合同号被空字符串覆盖，反之亦然。

这可能是由于数据显示为占位符造成的。如果我要将数据显示为一个值，我将无法进行任何更改。

这是数据的显示和输入方式（离子）：

<IonItem>
   <IonLabel>Contract No.:</IonLabel>
   <IonInput placeholder={dataList?.contractNo} value={contractNo} onIonChange={(e) => setContractNo(e.target.value)}></IonInput>
</IonItem>
<IonItem>
   <IonLabel>Tag No.:</IonLabel>
   <IonInput placeholder={dataList?.tagNo} value={tagNo} onIonChange={(e) => setTagNo(e.target.value)}></IonInput>
</IonItem>

获取数据功能：

function getData() {
        setBusy(true);
        const dataRef = firebase.firestore().collection("Data").doc(id);
        dataRef.get(id).then(doc => {
            const data = { id: doc.id, ...doc.data() }
            setDataList(data);
        });
        setBusy(false);
    }

使用效果：

useEffect(() => {
        getData();
    }, []);

更新数据功能：

function updateData(updatedData) {
        setBusy(true);
        ref
            .doc(updatedData.id)
            .update(updatedData)
            .catch((err) => {
                console.error(err);
            });
        setBusy(false);
    }

更新按钮：

<IonButton onClick={() => updateData({ 
        siteName: siteName, category: category, contractNo: contractNo, tagNo: tagNo, id: id
        })}>Update<PencilSquare size={25}></PencilSquare></IonButton>

常量：

const { id } = useParams();
const [dataList, setDataList] = useState([]);
const ref = firebase.firestore().collection("Data");
const [busy, setBusy] = useState(false);

const [contractNo, setContractNo] = useState("");
const [tagNo, setTagNo] = useState("");

标签： javascriptreactjsionic-frameworkgoogle-cloud-firestoreuse-effect

解决方案

当您将字段传递给 Firestore 的update()函数时，它假定您要将文档中的字段设置为您指定的值。如果您为该值指定一个空字符串，该字段也将在数据库中设置为一个空字符串。

为了不改变字段的值，你不应该在调用时传入该字段update()。因此，一个简单的解决方法是删除具有空字符串的字段作为函数中的值updateData()：

function updateData(updatedData) {
    setBusy(true);
    let updatedFields = {};
    Object.keys(updatedData).forEach((field) => {
        if (updatedData[field] && updatedData[field].length > 0) {
            updatedFields[field] = updatedData[field];
        }
    });
    ref
        .doc(updatedData.id)
        .update(updatedFields)
        .then(() => setBusy(false))
        .catch((err) => {
            console.error(err);
            setBusy(false);
        });
}

更新数据

推荐阅读