javascript - 如何在本机反应中仅显示来自firestore的登录用户的帖子?
问题描述
我想在我的仪表板中显示仅登录用户的帖子。我正在创建一个待办事项应用程序,经过身份验证的用户只能看到他们的待办事项列表。我知道我必须将 auth 中的 uid 与 firestore 文档相关联,但我不知道该过程。
我将新的 todo 添加到 firestore 并使用快照方法获取 todo 并将其作为 props 发送到另一个组件以进行渲染的组件:
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);
解决方案
首先,您必须在用户创建的每个新待办事项(文档)中存储用户的 UID。假设我们称该字段为“userID”。然后您可以查询该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;
}
}
}
推荐阅读
- javascript - 尽管启用了 CORS,但 express js api Access-Control-Allow-Origin 上的 CORS
- machine-learning - ValueError:“input_length”为 47,但接收到的输入具有形状(无、47、18704)
- visual-c++ - MSVC上单精度浮点指数的最大值是多少?
- javascript - 将弹出窗口滚动到屏幕外
- r - ggplot - R - 冲积图 - 条形之间的空间更大
- mysql - MySQL binlogs 到 BigQuery,什么是复制的好设计?
- c# - Xamarin MainPage 错误:当前上下文中不存在名称
- linux - Logstash - 用 grok 解析数据
- ibm-cloud - 是否可以将自由批处理日志发送到控制台
- batch-file - 如何编写一个批处理文件以每 10 毫秒 ping 一次?