Firebase / React查詢用戶名

Question

我正在嘗試通過獲取發布該組件的用戶的名稱來使Post組件正常工作。 現在，它的工作方式是我（通過Google或使用電子郵件/密碼組合）與用戶登錄，並以auth.currentUser.displayName或電子郵件，uid等方式獲取該用戶的數據...

當我發表文章時，它會使用用戶ID（即uid因為這將是唯一的。

現在，當我加載帖子時，我得到了post.name ，它原來是用戶名（直到我將其更改為存儲uid為止），但是現在我得到了用戶的ID。...

所以我的問題是：如何獲取用戶名而不是ID？

如上圖所示，帖子中的名稱是用戶的ID。 顯示帖子時，我想獲取username的用戶username 。 我怎樣才能做到這一點？

我希望這是有道理的。

這是我的render（）代碼：

render() {
    const { message, posts, error } = this.state;
    const isInvalid = message === '';

    return (
        <div>
            <form onSubmit={this.onSubmit}>
                <p>
                    Posting as:{' '}
                    {auth.currentUser.displayName || auth.currentUser.email}
                </p>
                <textarea
                    value={message}
                    onChange={event =>
                        this.setState(byPropKey('message', event.target.value))
                    }
                    name="message"
                    placeholder="Message..."
                />
                <button disabled={isInvalid} type="submit">
                    Post
                </button>

                {error && <p>{error.message}</p>}
            </form>

            <div>
                <ul>
                    {posts.map(post => (
                        <li key={post.id}>
                            <h4>{post.message}</h4>
                            <p>posted by: {post.name}</p>
                            {post.name === auth.currentUser.uid ? (
                                <button
                                    type="submit"
                                    onClick={() => {
                                        database.ref(`/posts/${post.id}`).remove();
                                    }}
                                >
                                    Delete Post
                                </button>
                            ) : null}
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
}

我顯示帖子的方式：

componentDidMount() {
    const postsRef = database.ref('posts');
    postsRef.on('value', snapshot => {
        let posts = snapshot.val();
        let newState = [];
        for (let post in posts) {
            newState.push({
                id: post,
                name: posts[post].name,
                message: posts[post].message
            });
        }
        this.setState({
            posts: newState
        });
    });
}

和onSubmit：

onSubmit = event => {
    const { message } = this.state;

    db.doCreatePost(auth.currentUser.uid, message)
        .then(() => {
            this.setState({
                message: '',
                error: null
            });
        })
        .catch(error => {
            this.setState(byPropKey('error', error));
        });

    event.preventDefault();
};

Answer 1

您可以這樣獲得用戶名。

firebase.database().ref('/users/' + post.name).once('value').then(function(snapshot) { const username = (snapshot.val() && snapshot.val().username) })

1. 使用“ post.name”作為對用戶的引用。
2. 在“用戶”集合中搜索與該用戶ID匹配的確切值。
3. 從快照獲取“用戶名”值。

希望能幫助到你！

Answer 2

您需要對用戶數據進行客戶端聯接。 用最簡單的形式可以是：

componentDidMount() {
    const postsRef = database.ref('posts');
    const usersRef = database.ref('users');
    postsRef.on('value', snapshot => {
        let posts = snapshot.val();
        let newState = [];
        for (let post in posts) {
          usersRef.child(posts[post].name).once('value').then(function(snapshot) {
            const username = snapshot.val().username;
            newState.push({
                id: post,
                uid: posts[post].name,
                name: username,
                message: posts[post].message
            });
            this.setState({
              posts: newState
            });
          })
        }
    });
}

請注意，此代碼會在每次加載用戶名時設置狀態，因此您會看到UI的許多更新。 如果要減少該數目，請查看Promise.all()以等待所有讀取。 您還需要保留已加載用戶的緩存，因為現在代碼會為每個帖子加載一個用戶（即使單個用戶有很多帖子）。