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

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;
    }
   }
  }
 }
请给我一些建议

我仍然是新手，仍在使用React和Firebase进行自我学习，请使用此代码帮助我。我尝试使用带有react＆material -...的表单从Firestore收集数据中获取和更新数据...

Answer 1

首先，如果要测试Firestore规则，有一个不错的选择（Firestore模拟器，您可以在firebase consol中找到它），可以在其中指定很多不同的参数并测试是否可以访问数据还是不基于特定方案。

Answer 2

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