Json 如何在react native中将this.props.key设置为Firebase数据库引用

我已从另一个组件检索到值，并显示在文本输入中，供用户编辑以下值（itemTitle:this.props.title，itemIng:this.props.ing，itemSteps:this.props.steps）和现在 在用户按下modal中的按钮后，我尝试将值更新回firebase。但是我在获取firebase数据库引用时遇到了一个问题，我可以从另一个组件获取{this.props._key}，但是当我以.child（itemKey）的身份编写时，它不起作用，并显示“找不到变量：itemKey”，有人有类似的问题吗

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

---

您需要将itemKey的值更改为this.state.itemKey，并且在初始化构造函数中的状态时，该值不会在构造函数中。无论何时调用任何函数，如调用

update

来更新值。尝试在函数中使用firebase的更新查询，并在Button react元素的

onPress

事件中使用该查询。请检查修改后的代码

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

import React，{Component}来自'React'；
进口{
平台，
样式表，
文本，
看法
滚动视图，
按钮
触控高光，
情态动词
文本输入，
图像背景
}从“反应本机”；
从“react native router flux”导入{Actions}；
从“/firebase”导入firebase；
常数遥控器http://l.rgbimg.com/cache1oCOq1/users/b/ba/ba1969/600/mxc1dae.jpg';
导出默认类RecipedDetails扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
modalVisible:错误，
itemTitle:this.props.title，
物品分类：这个。道具，
itemSteps:this.props.steps，
itemKey:this.props.\u key.toString（），
};
//this.vegeRef=this.getRef（）；
this.fastRef=this.getRef（）.child（“快餐”）；
this.hpRef=this.getRef（）.child（'health'）；
}
componentDidMount（）{
this.getRef（）.child（'素食者'）。on（'child_added'，s=>{
如果（s.存在（））{
console.log（s.val（））//它将返回新更新的对象
log（s.key）//它将返回时间戳键
这是我的国家({
itemTitle:s.val（）.title，
项目：s.val（）.ing，
itemSteps:s.val（）.steps，
})
}
})
}
setModalVisible（可见）{
this.setState（{modalVisible:visible}）；
}
getVegRef=（）=>{
this.getRef（）.child（'素食者'）.child（this.state.itemKey）
}
getRef=（）=>{
返回firebase.database（）.ref（）；
}
updateVeg=（）=>{
此.getVegRef（）更新(
{
标题：this.state.itemTitle，
ing:this.state.itemIng，
步骤：this.state.itemSteps
});
this.setModalVisible（！this.state.modalVisible）
}
updateItem（）{
此.setModalVisible（true）；
}
render（）{
返回(
{ }}
>
编辑详细信息并更新。
this.setState（{itemTitle}）
/>
this.setState（{itemIng}）
/>
this.setState（{itemSteps}）}
/>
this.setModalVisible（！this.state.modalVisible）}
title=“取消”
>
成分
{this.props.ing}
{this.props._key}
台阶
{this.props.steps}
更新配方
);
}
}

感谢您的回复，它已经被修复，但是当我更新值时，firebase数据被更新，但是

{this.props.ing}

和

{this.props.steps}

仍然保留ori值，您是否有任何想法刷新当前页面，因此这两个值将被更新？此外，您是否知道如何为firebase编写hasChild方法？我只想在

getVegRef（）

中有

{this.props.\u key}

这个子对象时运行update函数。我试过了，但它显示

{this.props.key}

不是对象。是的，请更新firebase的快照并打印

this.props.key

的值，以便我知道firebase使用的密钥是什么。firebase数据已更新，但

{this.props.ing}

和

{this.props.steps}

仍然保留ori值，您是否想刷新当前页面，以便更新这两个值？

{this.props.key}

的值是从上一个组件传递的随机键。因此，我尝试将其用作

getVegRef（）

请检查更新的代码以更新vaue，您可以使用

on（“child_added”）

在

componentDidMount

函数中获取值，也可以在更新值之前通过从文本框获取输入来设置值。由于

this.props

用作无法更改的静态值，请使用

this.setState

在

updateVeg（）函数中设置新值。在问下一个问题之前，请接受并投票决定答案
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>
        );
    }
}