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()以等待所有读取。 您还需要保留已加载用户的缓存，因为现在代码会为每个帖子加载一个用户（即使单个用户有很多帖子）。