firebase 使用ReactJS从Firestore数据库中删除一行

ldxq2e6h  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(141)

如何在Firestore中删除由两个不同数组中的值组成的行?(从Firestore文档中删除字段)
Firestore集合中的阵列:
1.食物
1.数量

表格示例:

Firebase相关代码(删除功能):

const handleDelete = async () => {
    onAuthStateChanged(auth, async (user) => {
        if (user) {
            const uid = user.uid;
            const snapshot = await getDoc(doc(db, 'data', uid));
            if (snapshot.exists()) {
                await snapshot.update({
                    value: FieldValue.delete(),
                    number: FieldValue.delete(),

                })
            } else {
                console.log('User doc missing');
            }
        } else {
            console.log('User not logged in');
        }
    })
}

表编码:

{/* table */}
            <table className='table table-hover'>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Food</th>
                        <th>Quantity (gr)</th>
                        {/* <th>Calories (kcl)</th> */}
                    </tr>
                </thead>
                <tbody>
                    {data.map((row, index) => {
                        // calculate calories
                        let calories = Math.ceil(row.quantity * 1.35);
                        return (
                            <>
                                <tr key={index}>
                                    <td>{index + 1}</td>
                                    <td className='font'>{row.value}</td>
                                    <td className='font'>{row.quantity}</td>
                                    {/* <td className='font'>{calories}</td> */}
                                    <p onClick={handleDelete}>X</p>
                                </tr>
                            </>
                        )
                    })}
                </tbody>
            </table>

提取数据代码:

  • NutritionDataInstance用作在单独JS文件中使用数组的单色调,以便在输入相同值的情况下不覆盖数组中的字段,而不是使用Firebase的“arrayUnion”函数 *
useEffect(() => {
    onAuthStateChanged(auth, async (user) => {
        let foodNames = [];
        let quantities = [];
        let foods = [];
        if (user) {
            const uid = user.uid;
            const snapshot = await getDoc(doc(db, 'data', uid));
            if (snapshot.exists()) {
                const { value, quantity } = snapshot.data();
                let s = 0;
                for (let i = 0; i < value.length; i++) {
                    foods.push({ value: value[i], quantity: quantity[i] });
                    foodNames.push(value[i]);
                    quantities.push(quantity[i]);
                    // sum of all calories
                    setSum(s = s + Math.ceil(quantity[i] * 1.35))
                }
                NutritionDataInstance.foodNames = foodNames;
                NutritionDataInstance.quantities = quantities;
                setData(foods);
            } else {
                console.log('User doc missing');
            }
        } else {
            console.log('User not logged in');
            setData([]);
        }
    });
}, [data]);

** Firebase 结构:**

xwbd5t1u

xwbd5t1u1#

如果要删除Firestore文档中两个不同Array字段中位于index = 1等位置的元素,在您的情况下,请执行以下操作:
1.在前端读取文档(即从Firestore查询)
1.通过删除与索引对应的值来修改前端中的两个数组
1.将这两个字段写回Firestore。
请注意,有一个arrayRemove()方法可以删除每个给定元素的所有示例,但在您的情况下,我认为您不能使用它:如果在quantity字段中多次输入相同的值,则将删除所有示例。
具体地说,在代码中,需要将每个文档的ID传递给表,这样就可以将文档ID传递给handleDelete函数。
除了

const { value, quantity } = snapshot.data();

你需要做的

const docId = snapshot.id;

相关问题