如何将我插入的ID从Firebase传递到下一个表单

编程问答 2022-06-09

问题描述

我是新来对本机做出反应的，所以我只能将输入文本中的数据存储到firebase并制作登录表单。 我想制作一个用于调查的应用程序，有一个用于调查数据的表单输入，然后将id调查传递给下一个表单（用户表单）。 我可以在CI或wordpress上执行此操作，但不能在本机上执行此操作

像这样的流

调查表单--- 发送ID插入的Firebase --->用户表单 -> 保存最终数据

为显示我的代码而编辑 调查表

import React,{ Component } from 'react';
import { 
    Button,StyleSheet,TextInput,ScrollView,ActivityIndicator,View,Text,SafeAreaView,TouchableOpacity
    
} from 'react-native';
import {Ionicons} from "@expo/vector-icons"
import firebase from 'firebase';

export default class PostScreen extends Component {
  constructor() {
    super();
    this.dbRef = firebase.firestore().collection('surveys');
    this.state = {
      usia: '',kab: '',kec: '',desa: '',rw: '',rt: '',jekel: '',tps: '',isLoading: false
    };
  }

  inputValueUpdate = (val,prop) => {
    const state = this.state;
    state[prop] = val;
    this.setState(state);
  }

  storesurveys() {
    if(this.state.usia === ''){
     alert('Masukan usia anda!')
     
    }else {
      this.setState({
        isLoading: true,});      
      this.dbRef.doc(this.state.usia).set({
        usia: this.state.usia,kab: this.state.kab,kec: this.state.kec,desa: this.state.desa,rw: this.state.rw,rt: this.state.rt,jekel: this.state.jekel,tps: this.state.tps,}).then((res) => {
          
        this.setState({
            usia: '',isLoading: false,});
        this.props.navigation.navigate('Dummy')
      })
      .catch((err) => {
        console.error("Error found: ",err);
        this.setState({
          isLoading: false,});
      });
    }
  }

  render() {
    if(this.state.isLoading){
      return(
        <View style={styles.preloader}>
          <ActivityIndicator size="large" color="#9E9E9E"/>
        </View>
      )
    }
    return (
    <SafeAreaView style={styles.container}>
    <View style={styles.header}>
        <TouchableOpacity onPress={()=> this.props.navigation.goBack()}>
            <Ionicons name="md-arrow-back" size={24} color="#D8D9DB"></Ionicons>
        </TouchableOpacity>
        <TouchableOpacity>
            <Text style={{fontWeight:"500"}}>Formulir surveys</Text>
        </TouchableOpacity>
    </View>
     <ScrollView style={styles.inputForm}>
        
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'usia'}
              value={this.state.usia}
              onChangeText={(val) => this.inputValueUpdate(val,'usia')}
          />
        </View>
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'kab'}
              value={this.state.kab}
              onChangeText={(val) => this.inputValueUpdate(val,'kab')}
          />
        </View>
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'kec'}
              value={this.state.kec}
              onChangeText={(val) => this.inputValueUpdate(val,'kec')}
          />
        </View>
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'desa'}
              value={this.state.desa}
              onChangeText={(val) => this.inputValueUpdate(val,'desa')}
          />
        </View>
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'rw'}
              value={this.state.rw}
              onChangeText={(val) => this.inputValueUpdate(val,'rw')}
          />
        </View>
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'rt'}
              value={this.state.rt}
              onChangeText={(val) => this.inputValueUpdate(val,'rt')}
          />
        </View>
        
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'jekel'}
              value={this.state.jekel}
              onChangeText={(val) => this.inputValueUpdate(val,'jekel')}
          />
        </View>
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'tps'}
              value={this.state.tps}
              onChangeText={(val) => this.inputValueUpdate(val,'tps')}
          />
        </View>
        <View style={styles.button}>
          <Button
            title='Add Survey'
            onPress={() => this.storesurveys()} 
            color="#19AC52"
          />
        </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

用户表格 注意：我需要将调查表传递给我的用户表，并从调查中插入ID 

import React,TouchableOpacity
    
} from 'react-native';
import {Ionicons} from "@expo/vector-icons"
import firebase from 'firebase';

export default class PostScreen extends Component {
  constructor() {
    super();
    this.dbRef = firebase.firestore().collection('penduduk');
    this.state = {
      nik: '',nama: '',tgl_lahir: '',usia: '',survey: '',prop) => {
    const state = this.state;
    state[prop] = val;
    this.setState(state);
  }

  storePenduduk() {
    if(this.state.nik === ''){
     alert('Masukan NIK anda!')
     
    }else if(this.state.nama === ''){
        alert('Masukan Nama anda!')
        
       }else {
      this.setState({
        isLoading: true,});      
      this.dbRef.doc(this.state.nik).set({
        nik: this.state.nik,nama: this.state.nama,tgl_lahir: this.state.tgl_lahir,usia: this.state.usia,survey : this.state.survey,}).then((res) => {
          
        this.setState({
            nik: nik,});
      });
    }
  }

  render() {
    if(this.state.isLoading){
      return(
        <View style={styles.preloader}>
          <ActivityIndicator size="large" color="#9E9E9E"/>
        </View>
      )
    }
    return (
    <SafeAreaView style={styles.container}>
    <View style={styles.header}>
        <TouchableOpacity onPress={()=> this.props.navigation.goBack()}>
            <Ionicons name="md-arrow-back" size={24} color="#D8D9DB"></Ionicons>
        </TouchableOpacity>
        <TouchableOpacity>
            <Text style={{fontWeight:"500"}}>Formulir Penduduk</Text>
        </TouchableOpacity>
    </View>
     <ScrollView style={styles.inputForm}>
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'nik'}
              value={this.state.nik}
              onChangeText={(val) => this.inputValueUpdate(val,'nik')}
          />
        </View>
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'nama'}
              value={this.state.nama}
              onChangeText={(val) => this.inputValueUpdate(val,'nama')}
          />
        </View>
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'tgl_lahir'}
              value={this.state.tgl_lahir}
              onChangeText={(val) => this.inputValueUpdate(val,'tgl_lahir')}
          />
        </View>
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'usia'}
              value={this.state.usia}
              onChangeText={(val) => this.inputValueUpdate(val,'usia')}
          />
        </View>
       
        
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'jekel'}
              value={this.state.jekel}
              onChangeText={(val) => this.inputValueUpdate(val,'jekel')}
          />
        </View>
        <View style={styles.inputGroup}>
          <TextInput
              placeholder={'survey'}
              value={this.state.survey}
              onChangeText={(val) => this.inputValueUpdate(val,'survey')}
          />
        </View>
        <View style={styles.button}>
          <Button
            title='Add User'
            onPress={() => this.storePenduduk()} 
            color="#19AC52"
          />
        </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

有人可以给我一个例子/源代码/文档吗？ 谢谢

解决方法

您可以在add（）之后获得插入的ID； 

firebase.firestore().collection("SurveyForm").add({
// inserted values
}). then((docRef) => { const insertedId = docRef.id }  })
,

第一个屏幕

this.dbRef.doc(this.state.usia).set({
usia: this.state.usia,kab: this.state.kab,kec: this.state.kec,desa: this.state.desa,rw: this.state.rw,rt: this.state.rt,jekel: this.state.jekel,tps: this.state.tps,}).then((res) => {
    const insertedId = res.id
    this.setState({
        usia: '',kab: '',kec: '',desa: '',rw: '',rt: '',jekel: '',tps: '',isLoading: false,});
    this.props.navigation.navigate('Dummy',{id: insertedId})
  })
  .catch((err) => {
    console.error("Error found: ",err);
    this.setState({
      isLoading: false,});
  });

第二屏幕：

render() {
    if(this.state.isLoading){
      const text =  this.props.navigation.getParam('id','new id');
      return(
        <View style={styles.preloader}>
          <ActivityIndicator size="large" color="#9E9E9E"/>
        </View>
      )
    }

必须遵守this答案的所有规则，以便您可以在下一个屏幕上ID

firebasefirebasejavascriptparameter-passingreact-native