Question

所以这会有点长，但是我将尝试很简单地提出我的问题。我组件的完整代码在结尾处。

我正在学习使用Firebase身份验证，并在React中从Firebase Firestone添加和检索数据。我已经设置了身份验证，这给了我一个唯一的ID，我可以使用它来获取我实时添加的内容。侦听和获取下面代码中的数据的函数是在useEffect挂钩内的listenForMessages（）。此函数获取数据以更新内容挂钩中的状态，然后在我的渲染中显示数据。问题是，现在要获取数据，我必须将唯一ID（jYAhV0xCtmOEJtOPXHirYXkQtju1）直接插入到该listenForMessages（）内部的doc（）中。这不理想，因为我无法对唯一ID进行硬编码。因此，我进行了一些切换，并将从app.js获得的唯一ID作为道具传递给该组件。多亏了下面的代码，唯一的ID现在传递到下面的usestate挂钩中，这应该使我可以自由地以doc（id）= doc（id）的方式在doc（）中使用id。

const [ id, setId ] = useState(props);

    useEffect(
        () => {
            setId(props.uid);
        },
        [ props ]
    );

问题在于它根本不起作用：/

当我在doc（）中添加id时，遇到此消息-FirebaseError：Function CollectionReference.doc（）要求其第一个参数的类型为非空字符串，但它是：自定义Object对象

有人可以帮忙吗？：/

const [ id, setId ] = useState(props);

    useEffect(
        () => {
            setId(props.uid);
        },
        [ props ]
    );

import React, { useState, useEffect } from 'react';
import fire, { db } from '../Config/firebase';

export default function Home(props) {
    function logout() {
        fire.auth().signOut();
    }

    const [ name, setName ] = useState('');
    const [ email, setEmail ] = useState('');
    const [ Content, setContent ] = useState([]);

    const [ id, setId ] = useState(props);

    useEffect(
        () => {
            setId(props.uid);
        },
        [ props ]
    );

    const sendData = () => {
        db
            .collection('users')
            .doc(props.uid)
            .set({
                name,
                email,
                id
            })
            .then(function() {
                console.log('Document successfully written!');
            })
            .catch(function(error) {
                console.error('Error writing document: ', error);
            });
    };


    const listenForMessages = () => {
        db.collection('users').doc('jYAhV0xCtmOEJtOPXHirYXkQtju1').onSnapshot(function(doc) {
            const allMessages = [];
            allMessages.push(doc.data());
            setContent(allMessages);
        });
    };

    useEffect(() => {
        listenForMessages();
    }, []);

    return (
        <div>
            <h1>I am home</h1>
            <button onClick={logout}>Log out</button>

            <h1>Enter information</h1>
            <form>
                <label>Name</label>
                <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
                <label>Email</label>
                <input type="text" value={email} onChange={(e) => setEmail(e.target.value)} />
            </form>
            <button onClick={sendData}>Send data</button>
            {Content.map((n) => (
                <p key={Math.floor(Math.random() * 10)}>
                    {n.name} {n.email}
                </p>
            ))}
        </div>
    );
}

无法从Firestore提取数据

0 个答案: