我希望能够在我的 firebase 数据库中获取自动生成的 id 子值，并在 function 中使用它们

Question

For clarity, this is what I mean when I'm referring to the auto generated id in Firebase:

**-M3pezrJXXdnPVq53M8A**
description: ''

heading: ''

location: ''  

I'm using React Native and Firebase database. The aim is to update the fields of the selected post. I have passed the values of the post's fields through navigation and want to call the Firebase update function in my 'Update Post' screen.

This is the editing screen. The params are passed over successfully.

import React from 'react';
import {
  StyleSheet,
  Button,
  TextInput,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';
import {Formik} from 'formik';
import {styles} from './PostList';
import Firebase from 'firebase';
import 'firebase/database';

export default function EditForm({route}) {
  const post = route.params;
  const postKey = post.post.key;
  console.log(postKey);

  function updatePost(values) {
    const ref = Firebase.database()
      .ref('posts')
      .child('key/' + postKey);
    ref
      .update({
        heading: values.heading,
        description: values.description,
        location: values.location,
      })
      .then(snapshot => {
        values.id = snapshot.id;
        snapshot.set(values);
      });
  }

  return (
    <View style={styles.container}>
      <Formik
        initialValues={{
          heading: post.heading,
          description: post.description,
          location: post.location,
        }}
        mapPropsToValues={post => ({
          heading: post.heading,
          description: post.description,
          location: post.location,
        })}
        enableReinitialize={true}
        onSubmit={(values, post) => {
          console.log(values);
          updatePost({
            heading: values.heading,
            description: values.description,
            location: values.location,
          });
        }}>
        {props => (
          <View>
            <TextInput
              style={formikstyles.txtInput}
              placeholder={'Give your post a title'}
              onChangeText={props.handleChange('heading')}
              value={props.values.heading}
            />
            <TextInput
              style={formikstyles.txtInput}
              placeholder={'Tell us about your leftovers...'}
              onChangeText={props.handleChange('description')}
              value={props.values.description}
            />
            <TextInput
              style={formikstyles.txtInput}
              placeholder={'Where can we get our grub?'}
              onChangeText={props.handleChange('location')}
              value={props.values.location}
            />
            <TouchableOpacity
              style={formikstyles.button}
              title={'submit'}
              onPress={props.handleSubmit}>
              <Text style={formikstyles.btnText}>Submit</Text>
            </TouchableOpacity>
          </View>
        )}
      </Formik>
    </View>
  );
}

I've tried to pull the id (postKey) using.key but it reads undefined. Is there any way of retrieving this parameter?

Answer 1

Edited my addPost function to manually generate a unique id then stored that uid in a field named 'id' in the database.

export function addPost(values, addComplete) {
  const key = Firebase.database()
    .ref('posts')
    .push().key;
  return Firebase.database()
    .ref('posts/' + key)
    .set({
      id: key,
      heading: values.heading,
      description: values.description,
      location: values.location,
    })
    .then(snapshot => {
      values.Id = snapshot.Id;
      snapshot.set(values);
    })
    .then(() => addComplete(values))
    .catch(error => console.log(error));
}

Now able to access the uid through navigation and map onto the path reference to get the specified post object:

import React from 'react';
import {
  StyleSheet,
  Button,
  TextInput,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';
import {Formik} from 'formik';
import {styles} from './PostList';
import Firebase from 'firebase';
import 'firebase/database';

export default function EditForm({route}) {
  const post = route.params;
  const postKey = post.post.id;
  const ref = Firebase.database().ref('posts/' + postKey);

  function updatePost(values) {
    ref
      .update({
        heading: values.heading,
        description: values.description,
        location: values.location,
      })
      .then(snapshot => {
        values.id = snapshot.id;
        snapshot.set(values);
      });
  }

  return (
    <View style={styles.container}>
      <Formik
        initialValues={{
          heading: post.heading,
          description: post.description,
          location: post.location,
        }}
        mapPropsToValues={post => ({
          heading: post.heading,
          description: post.description,
          location: post.location,
        })}
        enableReinitialize={true}
        onSubmit={(values, post) => {
          console.log(values);
          updatePost({
            heading: values.heading,
            description: values.description,
            location: values.location,
          });
        }}>
        {props => (
          <View>
            <TextInput
              style={formikstyles.txtInput}
              placeholder={'Give your post a title'}
              onChangeText={props.handleChange('heading')}
              value={props.values.heading}
            />
            <TextInput
              style={formikstyles.txtInput}
              placeholder={'Tell us about your leftovers...'}
              onChangeText={props.handleChange('description')}
              value={props.values.description}
            />
            <TextInput
              style={formikstyles.txtInput}
              placeholder={'Where can we get our grub?'}
              onChangeText={props.handleChange('location')}
              value={props.values.location}
            />
            <TouchableOpacity
              style={formikstyles.button}
              title={'submit'}
              onPress={props.handleSubmit}>
              <Text style={formikstyles.btnText}>Submit</Text>
            </TouchableOpacity>
          </View>
        )}
      </Formik>
    </View>
  );
}