Запрос Firebase / React для имени пользователя

Question

Я пытаюсь заставить свой компонент Post работать, получая имя пользователя, который его опубликовал.Прямо сейчас, способ, которым это работает, состоит в том, что я регистрируюсь с пользователем (через Google или используя комбинированный адрес электронной почты / пароль), и я получаю данные этого пользователя как auth.currentUser.displayName или электронная почта, uid и т.д ...

Когда я создаю сообщение, он принимает идентификатор пользователя, который является uid, потому что он будет уникальным.

Теперь, когда я загружаю сообщения, я получаю post.name, который изначально былимя пользователя (пока я не изменил его для хранения uid вместо), но теперь я получаю идентификатор пользователя ....

Итак, мой вопрос: как я могу получить имя пользователя вместо идентификатора?

Как видно на картинке выше, имя в сообщениях - это идентификатор пользователя.Я хочу получить 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

Вам необходимо выполнить соединение пользовательских данных на стороне клиента.В простейшем виде это может быть:

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
            });
          })
        }
    });
}

Обратите внимание, что этот код устанавливает состояние при каждой загрузке имени пользователя, поэтому вы увидите много обновлений пользовательского интерфейса.Если вы хотите уменьшить это число, посмотрите на Promise.all(), чтобы дождаться всех чтений.Вы также захотите сохранить кеш пользователей, которые вы уже загрузили, поскольку сейчас код загружает пользователя для каждого сообщения (даже если у одного пользователя много сообщений).

Answer 2

Вы можете получить имя пользователя следующим образом.

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

1. Используйте 'post.name' в качестве ссылки на пользователя.
2. Поиск вколлекция 'users' - точное значение, соответствующее этому идентификатору пользователя.
3. Получить значение 'username' из снимка.

Надеюсь, это поможет!