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

Posted 2023-03-17

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

【英文标题】：REACT: Updating one piece of data in a Firestore document results in all other data being overwritten with empty Strings

【发布时间】：2021-06-26 13:30:45

【问题描述】：

更新数据需要我在我的 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("");

【参考方案1】：

当您将字段传递给 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);
        );

更新数据