Каков наилучший способ изменить конкретное c отдельное значение для базы данных Firebase в React Native?

Question

Лог c, который я использовал при регистрации пользователя, заключается в добавлении его данных в путь в базе данных, а также в аутентификацию Firebase. В теории значениями было бы легче манипулировать. Моя цель - создать форму Formik, которая будет принимать существующее значение имени пользователя вошедшего в систему пользователя, отображать его в текстовом поле для изменения пользователем, а затем обновлять значение в базе данных Firebase. Кто-нибудь может помочь?

import React, {Component} from 'react';
import {TextInput, View, Button, StyleSheet} from 'react-native';
import {Formik} from 'formik';
import Firebase from 'firebase';
import 'firebase/database';
import 'firebase/auth';

export default class ChangeUsername extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentUsername: '',
      Username: '',
    };
  }

  getUsername() {
    const userKey = Firebase.auth().currentUser.uid;
    const userRef = Firebase.database().ref('users/' + userKey);

    userRef.once('value').then(snapshot => {
      const user = snapshot.val();
      this.setState({currentUsername: user.username});
      console.log(this.state.currentUsername);
    });
  }

  changeUsername() {
    const userKey = Firebase.auth().currentUser.uid;
    const userRef = Firebase.database().ref('users/' + userKey);
    userRef.update({
      username: this.state.Username,
    });
    console.log(this.state.Username);
  }

  componentDidMount() {
    this.getUsername();
    this.changeUsername();
  }

  render() {
    return (
      <View>
        <Formik
          initialValues={{
            username: this.state.currentUsername,
          }}
          enableReinitialize={true}
          onSubmit={this.changeUsername()}>
          {props => (
            <View>
              <TextInput
                style={style.txtInput}
                onChangeText={text => this.setState({Username: text})}
                value={this.state.currentUsername}
              />
              <Button title="Submit" onPress={props.handleSubmit} />
            </View>
          )}
        </Formik>
      </View>
    );
  }
}

Я также пытался создать форму с функциональным компонентом React, а не с классом. То, что в настоящее время происходит, это то, что текстовый ввод остается пустым и будет возвращаться к пустому каждый раз, когда я пытаюсь что-то набрать в нем. Кроме того, имя пользователя в базе данных будет обновлено до буквы, которую мне удастся набрать, прежде чем оно исчезнет. Т.е. я набираю букву "p", имя пользователя будет обновлено до строки "p" в базе данных firebase, после чего текстовый ввод будет очищен.

Answer 1

Вместо того, чтобы пытаться получить имя пользователя непосредственно из базы данных, я решил проблему, но извлек его из поля displayName в аутентификации Firebase.

import React, {useState} from 'react';
import {TextInput, View, Button, StyleSheet} from 'react-native';
import Firebase from 'firebase';
import 'firebase/database';
import 'firebase/auth';
import {Formik} from 'formik';
import {userKey} from '../config/ReusableVariables';

export default function ChangeUsername() {
  //obtain the user and username of logged in user as objects
  const user = Firebase.auth().currentUser;
  const currentUsername = Firebase.auth().currentUser.displayName;

  //set username variable that will be changed as the existing username
  const [Username, setUsername] = useState(currentUsername);

  //function that rewrites username in firebase authentication and database
  function changeUsername(value) {
    user.updateProfile({displayName: value.username}).then(() => {
      Firebase.database()
        .ref('users/' + userKey)
        .update({username: value.username});
    });
  }
  return (
    <View>
      <Formik
        initialValues={{
          username: currentUsername,
        }}
        enableReinitialize={true}
        onSubmit={values => {
          changeUsername({
            username: Username,
            displayName: Username,
            //values in authentication and database changed to newly set Username
          });
        }}>
        {props => (
          <View>
            <TextInput
              style={style.txtInput}
              onChangeText={
                text => setUsername(text)
                //variable Username will be set to whatever is typed into this text input
              }
              value={Username}
            />
            <Button
              title="Submit"
              onPress={
                props.handleSubmit
                //links button to onSubmit function in Formik
              }
            />
          </View>
        )}
      </Formik>
    </View>
  );
}