使用 react native 從 firebase 實時數據庫中讀取數據

Question

我想從 firebase 實時數據庫中讀取數據。

我想修復我的“ function readData() ”之類的，

如果我使用這個功能，我想讀取我的數據，而不輸入“用戶名”。

例如，我創建了這個，

用戶名：你好，email：hello@gmail.com

如果我按下“讀取數據”按鈕，（不輸入“用戶名”）我想讀取最近的數據。 （用戶名和 email 都有）

請幫我！

這是我的 app.js

import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { Button, button, StyleSheet, Text, TextInput, View } from 'react-native';
import { ref, set, update, onValue, remove } from "firebase/database";
import { db } from './components/config';


export default function App() {

  const [username, setName] = useState('');
  const [email, setEmail] = useState('');



  function createData() {

    set(ref(db, 'users/' + username), {          
      username: username,
      email: email  
    }).then(() => {
      // Data saved successfully!
      alert('data created!');    
  })  
      .catch((error) => {
          // The write failed...
          alert(error);
      });
}


  function update() {

    set(ref(db, 'users/' + username), {
      username: username,
      email: email  
    }).then(() => {
      // Data saved successfully!
      alert('data updated!');    
  })  
      .catch((error) => {
          // The write failed...
          alert(error);
      });
}

  
  function readData() {

    const starCountRef = ref(db, 'users/' + username);
    onValue(starCountRef, (snapshot) => {
      const data = snapshot.val();

      setEmail(data.email);   

    });

  }



  return (
    <View style={styles.container}>
      <Text>firebase</Text>
      <TextInput value={username} onChangeText={(username) => {setName(username)}} placeholder='Username' style={styles.TextBoxes}></TextInput>
      <TextInput value={email} onChangeText={(email) => {setEmail(email)}} placeholder='Email' style={styles.TextBoxes}></TextInput>
      <Button title='create data' onPress={createData}></Button>
      <Button title='update data' onPress={update}></Button>
      <Button title='read data' onPress={readData}></Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  TextBoxes: {
    width:'90%',
    fontSize:18,
    padding:12,
    backgroundColor:'grey',
    marginVertical:10,
  }
});

Answer 1

我知道如果用戶名為空，您想默認調用最后一個用戶名。 為此，您可以定義 lastUserName state 並在用戶名為空時調用它，例如；

 const [lastUserName, setLastUserName] = useState('');

讀取數據（），

 function readData() { const starCountRef = ref(db, 'users/' + username?== '': username; lastUserName), onValue(starCountRef. (snapshot) => { const data = snapshot;val(). setEmail(data;email); }); }

那么，視圖應該是這樣的；

 <View style={styles.container}> <Text>firebase</Text> <TextInput value={username} onChangeText={(username) => { setName(username) setLastUserName(username) // add this line } } placeholder='Username' style={styles.TextBoxes}></TextInput> <TextInput value={email} onChangeText={(email) => {setEmail(email)}} placeholder='Email' style={styles.TextBoxes}></TextInput> <Button title='create data' onPress={createData}></Button> <Button title='update data' onPress={update}></Button> <Button title='read data' onPress={readData}></Button> </View>

注意：如果您想將此 state 保留在全球范圍內，請使用 Redux。

注意：如果您希望應用程序在關閉和重新打開后在同一個 state 上運行，請使用 localStorage。 見： https://github.com/react-native-async-storage/async-storage