How to set this.props.key into the Firebase database reference in react native

问题

I have retrieved the values from the other component and displayed in the TextInput for users to edit the values which are the (itemTitle: this.props.title, itemIng: this.props.ing, itemSteps: this.props.steps) and now I'm trying to update the values back to firebase after user pressed the button in modal. But I'm having a problem to get the firebase database reference, I'm able get the {this.props._key} from another component but when I write as a .child(itemKey) it's not working and shows "Can't find variable: itemKey" Does anyone has the similar problem?

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Button,
  TouchableHighlight,
  Modal,
  TextInput,
  ImageBackground
} from 'react-native';
import {Actions}from 'react-native-router-flux';

import firebase from './firebase';

const remote = 'http://l.rgbimg.com/cache1oCOq1/users/b/ba/ba1969/600/mxc1dae.jpg';

export default class RecipeDetails extends React.Component{

  constructor(props){
    super(props);
    this.state={

      modalVisible: false,
      itemTitle: this.props.title,
      itemIng: this.props.ing,
      itemSteps: this.props.steps,
      itemKey: this.props._key.toString(),
    };

    this.vegeRef = this.getRef().child('Vegetarian').child(itemKey);
    this.fastRef = this.getRef().child('Fast Food');
    this.hpRef = this.getRef().child('Healthy');

  }


  setModalVisible(visible){
    this.setState({modalVisible:visible});
  }

  getRef(){
    return firebase.database().ref();
  }

  updateItem(){
    this.setModalVisible(true);
  }

  render(){

    return(
      <View style={styles.container}>
            <Modal
                visible={this.state.modalVisible}
                animationType={'slide'}
                onRequestClose={() => {}}
            >
            <Text>Edit the details and Update.</Text>
                  <TextInput
                    value={this.state.itemTitle}
                    onChangeText ={(itemTitle) => this.setState({ itemTitle })}

                  />
                  <TextInput
                    value={this.state.itemIng}
                    onChangeText ={(itemIng) => this.setState({itemIng})}

                  />
                  <TextInput
                    value={this.state.itemSteps}
                    onChangeText ={(itemSteps) => this.setState({itemSteps})}

                  />

              <View style={styles.modalContainer}>
                <View style={styles.innerContainer}>
                  <Button onPress={() => {
                      this.vegeRef.update({title:this.state.itemTitle, ing:this.state.itemIng, steps:this.state.itemSteps});
                      this.setModalVisible(!this.state.modalVisible)
                    }}
                      title="Save Recipe"
                  >
                  </Button>
                  <Button
                      onPress={() => this.setModalVisible(!this.state.modalVisible)}
                      title="Cancel"
                  >
                  </Button>
                </View>
              </View>
            </Modal>


            <ImageBackground
              style={{
                flex: 1,
                justifyContent: 'center',
                paddingVertical: 35 

              }}
              source={{ uri: remote }}
            >
            <ScrollView style={styles.container2} showsVerticalScrollIndicator={false}>
                <Text style={styles.heading1}>
                  Ingredients
                </Text>
                <Text style={styles.heading2}>
                  {this.props.ing}
                  {this.props._key}
                </Text>

                <Text style={styles.heading1}>
                  Steps
                </Text>
                <Text style={styles.heading2}>
                  {this.props.steps}
                </Text>
            </ScrollView>
            </ImageBackground>

        <View style={styles.action}>
              <TouchableHighlight
                underlayColor='#24ce84'
                onPress={this.updateItem.bind(this)}
              >
                <Text style = {styles.actionText}>Update Recipe</Text>
              </TouchableHighlight>
        </View>
      </View>
    );
  }
}

This is the Firebase JSON format

 "Vegetarian" : {
    "-L3RaWBQchF5rKmVtpNk" : {
      "ing" : "Aasaaaa",
      "steps" : "Aa",
      "title" : "Eeww"
    },
    "-L3WdmePSwkWNN4xB51M" : {
      "ing" : "This is good",
      "steps" : "Nice",
      "title" : "Salad"
    },

回答1:

You need to change the value ot itemKey to this.state.itemKey and that will not be inside constructor as your are initialising the states in constructor. Also whenever you are calling any function like you have called update to update the values. Try to use the update query of firebase inside a function and use that in onPress event of Button react element. Please check modified code.

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Button,
    TouchableHighlight,
    Modal,
    TextInput,
    ImageBackground
} from 'react-native';
import { Actions } from 'react-native-router-flux';

import firebase from './firebase';

const remote = 'http://l.rgbimg.com/cache1oCOq1/users/b/ba/ba1969/600/mxc1dae.jpg';

export default class RecipeDetails extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

            modalVisible: false,
            itemTitle: this.props.title,
            itemIng: this.props.ing,
            itemSteps: this.props.steps,
            itemKey: this.props._key.toString(),
        };

        // this.vegeRef = this.getRef();
        this.fastRef = this.getRef().child('Fast Food');
        this.hpRef = this.getRef().child('Healthy');

    }

    componentDidMount() {
        this.getRef().child('Vegetarian').on('child_added', s => {
            if (s.exists()) {
                console.log(s.val()) // It will return the new updated object
                console.log(s.key) // It will return the timestamp key
                this.setState({
                    itemTitle: s.val().title,
                    itemIng: s.val().ing,
                    itemSteps: s.val().steps,
                })
            }
        })
    }

    setModalVisible(visible) {
        this.setState({ modalVisible: visible });
    }

    getVegRef = () => {
        this.getRef().child('Vegetarian').child(this.state.itemKey)
    }

    getRef = () => {
        return firebase.database().ref();
    }

    updateVeg = () => {
        this.getVegRef().update(
            {
                title: this.state.itemTitle,
                ing: this.state.itemIng,
                steps: this.state.itemSteps
            });
        this.setModalVisible(!this.state.modalVisible)
    }

    updateItem() {
        this.setModalVisible(true);
    }

    render() {

        return (
            <View style={styles.container}>
                <Modal
                    visible={this.state.modalVisible}
                    animationType={'slide'}
                    onRequestClose={() => { }}
                >
                    <Text>Edit the details and Update.</Text>
                    <TextInput
                        value={this.state.itemTitle}
                        onChangeText={(itemTitle) => this.setState({ itemTitle })}

                    />
                    <TextInput
                        value={this.state.itemIng}
                        onChangeText={(itemIng) => this.setState({ itemIng })}

                    />
                    <TextInput
                        value={this.state.itemSteps}
                        onChangeText={(itemSteps) => this.setState({ itemSteps })}

                    />

                    <View style={styles.modalContainer}>
                        <View style={styles.innerContainer}>
                            <Button onPress={
                                this.updateVeg
                            }
                                title="Save Recipe"
                            >
                            </Button>
                            <Button
                                onPress={() => this.setModalVisible(!this.state.modalVisible)}
                                title="Cancel"
                            >
                            </Button>
                        </View>
                    </View>
                </Modal>


                <ImageBackground
                    style={{
                        flex: 1,
                        justifyContent: 'center',
                        paddingVertical: 35

                    }}
                    source={{ uri: remote }}
                >
                    <ScrollView style={styles.container2} showsVerticalScrollIndicator={false}>
                        <Text style={styles.heading1}>
                            Ingredients
                </Text>
                        <Text style={styles.heading2}>
                            {this.props.ing}
                            {this.props._key}
                        </Text>

                        <Text style={styles.heading1}>
                            Steps
                </Text>
                        <Text style={styles.heading2}>
                            {this.props.steps}
                        </Text>
                    </ScrollView>
                </ImageBackground>

                <View style={styles.action}>
                    <TouchableHighlight
                        underlayColor='#24ce84'
                        onPress={this.updateItem.bind(this)}
                    >
                        <Text style={styles.actionText}>Update Recipe</Text>
                    </TouchableHighlight>
                </View>
            </View>
        );
    }
}

来源：https://stackoverflow.com/questions/48513200/how-to-set-this-props-key-into-the-firebase-database-reference-in-react-native