Question

我正在尝试通过获取发布用户的名称来使我的Post组件正常工作。现在，它的工作方式是（通过Google或使用电子邮件/密码组合）与用户登录，并以auth.currentUser.displayName或电子邮件，uid等方式获取该用户的数据...

发布信息时，它会使用用户ID uid，因为这将是唯一的。

现在，当我加载帖子时，我得到了post.name，它原来是用户名（直到我将其更改为存储uid为止），但是现在我获得了该用户的ID ....

所以我的问题是：如何获取用户名而不是ID？

如上图所示，帖子中的名称是用户的ID。显示帖子时，我想获得用户的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

您可以获得这样的用户名。

<h1>INFO</h1> <div class="container-fluid"> <div class="row"> <div class="col-lg-6 col-sm-12 bg-blue"> <div class="bi-left"> <img src=""> <ul> <li>text</li> <li>text</li> <li>text</li> <li>text</li> </ul> </div> </div> <div class="col-lg-6 col-sm-12"> <div class="bi-right"> <img src=""> <ul> <li>text</li> <li>text</li> <li>text</li> <li>text</li> </ul> </div> </div> </div> </div>

使用“ post.name”作为对用户的引用。
在“用户”集合中搜索与该用户ID匹配的确切值。
从快照获取“用户名”值。

希望有帮助！

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

Firebase / React查询用户名

2 个答案: