如何在反应原生中仅显示来自firestore的登录用户的帖子？

Question

我想在我的仪表板中显示仅登录用户的帖子。 我正在创建一个待办事项应用程序，其中经过身份验证的用户只能看到他们的待办事项列表。 我知道我必须将来自 auth 的 uid 与 firestore 文档相关联，但我不知道这个过程。

我将一个新的待办事项添加到 firestore 并使用快照方法获取待办事项并将其发送到另一个组件作为渲染道具的组件：

function Dash() {
  const [todo, setTodo ] = useState('');
  const [ loading, setLoading ] = useState(true);
  const [ todos, setTodos ] = useState([]);
  const ref = db.collection('todos');
  useEffect(() => {
    return ref.onSnapshot((querySnapshot) => {
      const list = [];
      querySnapshot.forEach(doc => {
        const { text, done } = doc.data();
        list.push({
          id: doc.id,
          text,
          done,
        });
      });

      setTodos(list);

      if (loading) {
        setLoading(false);
      }
    });
  }, []);
  
  async function addTodo() {
   await ref.add({
      done: false,
      text: todo,
      
    });

    setTodo('');
  }
  return(
  <>
  <Appbar>
    <Appbar.Content title={'TODOs List'} />
  </Appbar>
  <FlatList
        style={{flex: 1}}
        data={todos}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Todo {...item} />}
      />

 
  <TextInput label={'New Todo'} value={todo} onChangeText={(text) => setTodo(text)} />
  <Button onPress={() => addTodo()}>Add TODO</Button>
</>
  );
}

我渲染待办事项并将其显示在列表中的组件：

import React, {useContext, useState} from 'react';
import { ScrollView, Text, FlatList, StyleSheet, View, CheckBox, Alert } from 'react-native';
import { db }  from '../firebase/fire';
import { List, Button, Divider, Provider } from 'react-native-paper';
import { auth } from '../firebase/fire';
import {
  Menu,
  MenuOptions,
  MenuOption,
  MenuTrigger,
} from 'react-native-popup-menu';


function Todo({ id, text, done}) {
  const [user, setUser] = useState();
  const [visible, setVisible]= useState(false);
  const openMenu =() => setVisible(true);
  const closeMenu =() => setVisible(false);


  function deleteDoc(){
    db.collection('todos').doc(id).delete();
  }
  async function toggleComplete() {
    try{

    await db
      .collection('todos')
      .doc(id)
      .update({
        done: !done,
      
      });}
      catch
        (err){
          console.log(err);
        }
      }

  return (
    <List.Item
      title={text}
      left={props => (
        <Button {...props} icon={done ? 'check' : 'cancel'} onPress={() => toggleComplete()}/>
      )}
      right={()=>(
        <Button  icon='delete' onPress={() => deleteDoc()}/>
      )}
    />
    
  );
}
export default React.memo(Todo);

Answer 1

首先，您必须在用户创建的每个新待办事项（文档）中存储用户的 UID。 假设我们称该字段为“用户 ID”。 然后，您可以查询将userID字段设置为当前用户的 UID 的文档。

获取当前用户的 UID：

const uid = firebase.auth().currentUser.uid

查询以获取用户的文档：

const ref = db.collection("todos").where("userID", "==", uid)
ref.get().then((querySnapshot) => {
  const list = [];
  querySnapshot.forEach(doc => {
    const { text, done } = doc.data();
    list.push({
      id: doc.id,
      text,
      done,
    });
  });
  setTodos(list);
})

为确保用户可以读/写他们自己的文档，请设置适当的安全规则：

service cloud.firestore {
  match /databases/{database}/documents {
    match /todos/{todoID} {
      allow read, write: if request.auth != null && resource.data.userID == request.auth.uid;
    }
  }
}