“ TypeError:尝试从Firestore捕获时无法读取未定义的属性'name'”

问题描述 投票:-3回答:1

我仍然是新手,并尝试使用react从Firestore学习捕获文件,我在我的代码中发现错误,*页面中所有未定义的'名称'']](该名称在Firestore中可用)>

错误是“ TypeError:无法读取未定义的属性'名称'”,

55 |编辑培训:{form.name}

功能
function EditProduk({ match }) {

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

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

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

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

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

const handleChange = e => {

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

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>
                <TextField
                    id="name"
                    name="name"
                    label="Training Name"
                    margin="normal"
                    fullWidth
                    value={form.name}
                    onChange={handleChange}
                    helperText={error.name}
                    error={error.name ? true : false}
                />

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从firestore中学习捕获文件,我在代码中发现错误,*'页面中所有'name'均未定义'*(该名称在firestore中可用),错误为。 ..

reactjs firebase google-cloud-firestore firebase-security-rules
1个回答
0
投票

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

据我所知,您想从Firestore中获取数据,将其放入表单中,可能编辑数据并将其保存回数据库中。

© www.soinside.com 2019 - 2024. All rights reserved.