Как вытащить ключ из базы данных Firebase в реальном времени и перейти на экран редактирования?

Question

Я довольно новичок, чтобы реагировать на native / Firebase, и пытаюсь выяснить, как получить уникальный ключ из записи в базе данных (они генерируются случайным образом при использовании Pu sh), поэтому я могу обновить базу данных запись на моем экране редактирования. Любая помощь или указание о том, как я могу это сделать sh, это очень ценится.

Вот мой основной экран подачи, где все элементы из базы данных собираются и отображаются:

let ref = db.ref('dogs');

export default class Main extends React.Component {
  _isMounted = false;
  constructor() {
    super();
    this.state = {
      currentUser: null,
      errorMessage: null,
      items: [],
      key: '',
    };
  }
  componentDidMount() {
    this._isMounted = true;

    const {currentUser} = firebaseAuth;

    this.setState({currentUser});
    ref.on('value', snapshot => {
      if (this._isMounted) {
        let data = snapshot.val();
        let items = Object.values(data);
        this.setState({items});
      }
    });
  }
  componentWillUnmount() {
    this._isMounted = false;
  }


  render() {
    const {currentUser} = this.state;
    return (
      <View style={styles.container}>
        <View>
          <View style={styles.container}>
            {this.state.items.length > 0 ? (
              <ItemComponent
                style={styles.listDog}
                items={this.state.items}
                navigation={this.props.navigation}
              />
           ) : (
              <Text>No dogs</Text>
            )}
          </View>
          <View style={styles.bottomContainer}>
            <TouchableOpacity
              style={styles.addBtn}
              onPress={() => this.props.navigation.navigate('dogCreation')}>
              <View>
                <FontAwesomeIcon style={styles.penIcon} icon={faBone} />
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}

вот мой компонент элемента:

export default class ItemComponent extends Component {
  static propTypes = {
    items: PropTypes.array.isRequired,
  };

  render() {
    return (
      <View style={styles.itemsList}>
        {this.props.items.map((item, dog) => {
          return (
            <TouchableOpacity
              key={dog}
              onPress={() =>
                this.props.navigation.navigate('Profile', {
                  name: item.name,
                  image_uri: item.image_uri,
                  parent: item.parent,
                  parentEmail: item.parentEmail,
                  parentTwo: item.parentTwo,
                  parentTwoEmail: item.parentTwoEmail,
                })
              }>
              <View style={styles.dogCard}>
                <Image source={{uri: item.image_uri}} style={styles.dogImage} />
                <Text style={styles.itemtext}>{item.name} </Text>

                <FontAwesomeIcon style={styles.chevron} icon={faChevronRight} />
              </View>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}

вот моя страница профиля:

export default class Profile extends React.Component {
  render() {
    const {navigation} = this.props;
    const dogName = navigation.getParam('name', '');
    const image_uri = navigation.getParam('image_uri', '');
    const parent = navigation.getParam('parent', '');
    const parentEmail = navigation.getParam('parentEmail', '');
    const parentTwo = navigation.getParam('parentTwo', '');
    const parentTwoEmail = navigation.getParam('parentTwoEmail', '');

    return (
      <View style={styles.container}>
        <Image style={styles.dogImage} source={{uri: image_uri}} />
        <View style={styles.contentBlock}>
          <Text style={styles.header}>Name</Text>
          <Text style={styles.textStyle}>{dogName}</Text>
        </View>
        <View style={styles.contentBlock}>
          <Text style={styles.header}>Pet Parent 1 Info</Text>
          <Text style={styles.subHeader}>Name</Text>
          <Text style={styles.textStyle}>{parent}</Text>
          <Text style={styles.subHeader}>Name</Text>
          <Text style={styles.textStyle}>{parentEmail}</Text>
        </View>
        <View style={styles.contentBlock}>
          <Text style={styles.header}>Pet Parent 2 Info</Text>
          <Text style={styles.subHeader}>Name</Text>
          <Text style={styles.textStyle}>{parentTwo}</Text>
          <Text style={styles.subHeader}>Name</Text>
          <Text style={styles.textStyle}>{parentTwoEmail}</Text>
        </View>
        <TouchableOpacity
          style={styles.addBtn}
          onPress={() =>
            this.props.navigation.navigate('editProfile', {
              name: dogName,
              image_uri: image_uri,
              parent: parent,
              parentEmail: parentEmail,
              parentTwo: parentTwo,
              parentTwoEmail: parentTwoEmail,
            })
          }>
          <Text>EDIT</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

и вот моя функция обновления страницы редактирования профиля:

let ref = db.ref('dogs');
let addItem = (
  dog,
  parent,
  parentEmail,
  parentTwo,
  parentTwoEmail,
  image_uri,
) => {
  db.ref('/dogs/')
    .update({
      name: dog,
      parent: parent,
      parentEmail: parentEmail,
      parentTwo: parentTwo,
      parentTwoEmail: parentTwoEmail,
      image_uri: image_uri,
    });
};

Answer 1

просто используйте при возврате возвратного снимка snapshot.key.

    ref.on('value', snapshot => {
      if (this._isMounted) {
        let id = snapshot.key;
        let data = snapshot.val();
        let items = Object.values(data);
        this.setState({items});
      }
    });

вы можете увидеть более подробную информацию здесь: https://firebase.google.com/docs/reference/js/firebase.database.DataSnapshot#key

** некоторые важные моменты, Если вы используете библиотеку Firebase непосредственно в React Native напрямую, я советую вам использовать версию, созданную специально для React Native, которая исправляет несколько проблем с таймерами в ОС. Вы можете увидеть здесь: https://rnfirebase.io/

** другие важные детали, ваша функция возврата из firebase является слушателем, а использование this._isMounted является антипаттерном. Вы можете использовать subscriber, чтобы остановить слушателя.

, так что ...

let subscriber;
...
componentDidMount() {

    const {currentUser} = firebaseAuth;

    this.setState({currentUser});

    subscriber = ref.on('value', snapshot => {    
        let data = snapshot.val();
        let items = Object.values(data);
        this.setState({items});
    });
  }

  componentWillUnmount() {
    // Stop listening for updates when no longer required
    this.subscriber();
  }