我正在學習 ReactJS hooks 和 firebase，我從 firestore 獲取用戶并使用“Verify”按鈕我將 user.status 設定為“verified”，此代碼用于驗證 firestore 中的用戶，但是我不不知道我應該在哪里設定用戶的狀態才能使組件重新渲染！
我將不勝感激您的幫助！
/* some imports have been hidden for making the code readable */
import React, { useState, useEffect } from 'react'
import {db} from '../firebase'
import { collection, getDocs, query, where, updateDoc, doc } from 'firebase/firestore'
export default function Page() {
const [error, setError] = useState("")
const { currentUser, logout } = useAuth()
const[status, setStatus] = useState("notverified")
const history = useHistory()
// firestore
const [users, setUsers] = useState([])
const usersCollectionRef = collection(db, "users")
const queryInverified = query(usersCollectionRef, where("status","==", "notverified"))
const updateUser = async (id, status)=> {
const userDoc = doc(db, "users", id)
const newStatus = {status: status= "verified"}
setStatus("verified")
await updateDoc(userstDoc, newStatus)
/* Following AKX 's answer! */
setUsers((oldUsers) =>
oldUsers.map((user) =>
user.id === id? {...user, status} : user,
),
);
}
}
useEffect(() =>{
const getUsers = async () => {
const data = await getDocs(queryInverified)
setUsers(data.docs.map((doc)=>({...doc.data(), id: doc.id})))}
getUsers()
}, [])
return (
<>
<Container>
<Card>
<Card.Body>
<div>
{users.map((user) => {
return(
<div className="card mb-4" >
<div className="card-body">
<h5>User Name: {user.name}</h5>
<p>Verification status: {user.status}</p>}
<Button onClick={() =>{updateUser(user.id, user.status)>
Verify</Button>
</div>
</div>
)
})}
</div>
</Card.Body>
</Card>
</Container>
</>
)
}
uj5u.com熱心網友回復：
好吧，users在 Firebase 中更新用戶后，您不會以任何方式更新狀態。
你有兩個選擇：
本地狀態的樂觀更新，即
setUsers(...)在 updateDoc 等待更新用戶陣列中剛剛更新的用戶之后：setUsers((oldUsers) => oldUsers.map((user) => user.id === id ? { ...user, status } : user, ), );之后只需從 Firebase 重新加載資料；將提取代碼重構為另一個函式，您可以在當前
useEffect和 updateUser 處理程式中呼叫。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/329007.html