尝试从 Firestore 获取和更新集合时发现“文档集合中未定义”

Question

我还是新手，还在使用 react 和 firebase 进行自学，请帮我处理这段代码。

我尝试使用带有 react 和 material-ui 的表单从 firestore 收集数据 获取和更新数据 ,

在我更新 useEffect 函数后，没有发现错误，只是没有按我的预期工作。

attached file firestore location picture

  import React, { useState, useEffect } from 'react';

 // material-ui
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';

// firebase
 import { useFirebase } from '../../../components/FirebaseProvider';
 import { useDocument } from 'react-firebase-hooks/firestore';

import AppPageLoading from '../../../components/AppPageLoading';
import { useSnackbar } from 'notistack';

函数

function EditProduk({ match }) {

const { firestore, user } = useFirebase();
const { enqueueSnackbar } = useSnackbar();
const produkTraining = firestore.doc(`userdoc/${user.uid}/training/${match.params.trainingId}`);

const [snapshot, loading] = useDocument(produkTraining);

const [form, setForm] = useState({
    name: '',
    trainer: '',
    price: 0,
    description: ''
});

const [error, setError] = useState({
    name: '',
    trainer: '',
    price: '',
    description: ''
})

const [isSubmitting, setSubmitting] = useState(false);

useEffect(() => {
    if (snapshot) {

        setForm(currentForm => ({
            ...currentForm,
            ...snapshot.data()
        }));
    }
}, [snapshot]);

const handleChange = e => {

    setForm({
        ...form,
        [e.target.name]: e.target.value
    })

    setError({
        ...error,
        [e.target.name]: ''

    })
}

const validate = () => {
    const newError = { ...error };

    if (!form.name) {
        newError.name = 'Training name must be filled';
    }
    if (!form.trainer) {
        newError.trainer = 'trainer name must be filled';
    }
    if (!form.price) {
        newError.price = 'price must be filled';
    }
    if (!form.description) {
        newError.description = 'description must be filled';
    }
    return newError

}


const handleSubmit = async e => {
    e.preventDefault();

    const findErrors = validate();

    if (Object.values(findErrors).some(err => err !== '')) {
        setError(findErrors);
    } else {
        setSubmitting(true);
        try {
            await produkTraining.set(form, { merge: true });
            enqueueSnackbar('Data has been saved', { variant: 'success' })
        }
        catch (e) {
            enqueueSnackbar(e.message, { variant: 'error' })
        }
        setSubmitting(false);
    }

}

if (loading) {
    return <AppPageLoading />
}

return <div>
    <Typography variant="h5" component="h1">Edit Training: {form.name}</Typography>
    <Grid container alignItems="center" justify="center">
        <Grid item xs={12} sm={6}>
            <form id="produk-form" onSubmit={handleSubmit} noValidate>
                <TextField
                    id="name"
                    name="name"
                    label="Training Name"
                    margin="normal"
                    required
                    fullWidth
                    value={form.name}
                    onChange={handleChange}
                    helperText={error.name}
                    error={error.name ? true : false}
                    disabled={isSubmitting}
                />

firestore 规则

 service cloud.firestore {
  match /databases/{database}/documents {
   match /userdoc/{uid} {
    allow read: if request.auth.uid == uid;
    allow write: if request.auth.uid == uid;

    match /training/{trainingId}{
    allow read, write: if request.auth.uid == uid;
    }
   }
  }
 }

请给我一些建议

Answer 1

首先，如果你想测试firestore规则，有一个很好的选择（firestore模拟器，你可以在firebase consol中找到它）你可以在其中指定很多不同的参数并测试你是否可以访问数据或不基于特定场景。

据我了解，您希望从 firestore 获取数据，将其放入表单，可能会编辑数据并将其保存回数据库。

您收到的错误与 firestore 或其规则无关，因为目前似乎未定义 form 变量。

试试这个：

async function EditProduk({ match }) {

...

const [snapshot, loading] = await useDocument(trainingDoc);

Answer 2

要消除错误，您需要将value={form.name} 替换为value={form && form.name && form.name}

还有

useEffect(() => {
    if (snapshot.exists) {
        setForm(snapshot.data());
    }
}, [snapshot]);