如何获取要在TextInput上显示的检索firebase值并更新详细信息react-native

Question

我正在尝试从firebase-database检索值并设置要在TextInput上显示的值，因此用户可以在那里编辑值并按下按钮将值更新回firebase。我已经尝试了所有的方法，但它仍然无法正常工作，是否有人可以帮助我解决这个问题。

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';

export default class RecipeDetails extends React.Component{

  constructor(){
    super();
    this.state={
      text: '',
      ingText:'',
      stepsText:'',
      modalVisible: false
    }

    this.vegeRef = this.getRef().child('Vegetarian');   
  }

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

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

  getVegeItems(vegeRef){

    vegeRef.on('value',(snap) =>{
      snap.forEach((child) => {
        vegeRef.push({title: child.val().title}),
        vegeRef.push({ing:child.val().ing}),
        vegeRef.push({steps:child.val().steps}),
        vegeRef.push({_key:child.key})
      });
      this.setState({
        text: this.state.text(title)
      });
    });
  }

  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
                    placeholder="Add Recipes"
                    onChangeText ={(value) => this.setState({text:value})}
                    value={this.state.text}
                  />
                  <TextInput
                    placeholder="Ingredients"
                    onChangeText ={(ingText) => this.setState({ingText})}
                    value={this.state.ingText}
                  />
                  <TextInput
                    placeholder="Steps"
                    onChangeText ={(stepsText) => this.setState({stepsText})}
                    value={this.state.stepsText}
                  />

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

这是Firebase JSON

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

Answer 1

这里我更改了更新firebase节点的方法。我正在获取每个节点的firebase时间戳以及来自vegref的数据，并发送该firebase时间戳以及输入以了解我想要更新的确切节点。

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';

export default class RecipeDetails extends React.Component {

    constructor() {
        super();
        this.state = {
            items: [],
            editedCode:{},
            modalVisible: false
        }

        this.vegeRef = this.getRef().child('Vegetarian');
    }

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

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

    componentDidMount() {
        vegeRef.on('value', s => {
            this.setState({
                items: [...this.state.items, { ...s.val(), firebaseUrl: s.key }]
            })
        })
    }

    // handleCodeChange function is used to handle the changed text inside each text input 
    handleCodeChange = (newVal, itemIndex) => {
        let item = this.state.items[itemIndex]
        let newItem = Object.assign(item, { [key]: newVal })
        let oldItems = this.state.items
        oldItems[itemIndex] = newItem
        this.setState({
            items: oldItems,
            editedCode:newItem
        })
    }

    updateItems = () => {
        let object = this.state.editedCode
        e.preventDefault()
        vegeRef.child(object.firebaseUrl).once("value", function (snapshot) {
            snapshot.ref.update({
                text: object.text,
                ing: object.ing,
                steps: object.stepsText
            }, () => {
                console.log("record updated")
            })
        });
    }

    render() {

        let itemNodes = this.state.items.map ((item, itemIndex) => {
            return (
                <div>
                    <TextInput
                        placeholder="Add Recipes"
                        onChangeText={(e) => this.handleCodeChange(e.target.value, item.text)}
                        value={item.text}
                    />
                    <TextInput
                        placeholder="Ingredients"
                        onChangeText={(e) => this.handleCodeChange(e.target.value, item.ingText)}
                        value={item.ingText}
                    />
                    <TextInput
                        placeholder="Steps"
                        onChangeText={(e) => this.handleCodeChange(e.target.value, item.stepsText)}
                        value={item.stepsText}
                    />
                </div>
            )
        })


        return (
            <View style={styles.container}>
                <Modal
                    visible={this.state.modalVisible}
                    animationType={'slide'}
                    onRequestClose={() => { }}
                >
                    <Text>Edit the details and Update.</Text>
                    {itemNodes}
                    <View style={styles.modalContainer}>
                        <View style={styles.innerContainer}>
                            <Button onPress={this.updateItems}
                                title="Save Recipe"
                            >
                            </Button>
                            <Button
                                onPress={() => this.setModalVisible(!this.state.modalVisible)}
                                title="Cancel"
                            >
                            </Button>
                        </View>
                    </View>
                </Modal>
            </View>
        );
    }
}