setState 更新后 ReactJS 组件不重新渲染？

Question

我正在学习 ReactJS 钩子和 firebase，我正在从 firestore 获取用户并使用“验证”按钮将 user.status 设置为“已验证”，此代码用于验证 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> 
      </>
    ) 
}

Answer 1

好吧，在 Firebase 中更新用户后，您不会以任何方式更新 users 状态。

您有两种选择：

• 本地状态的乐观更新，i。 e. setUsers(...)在updateDoc之后等待更新users数组中刚刚更新的用户：

  setUsers((oldUsers) =>
    oldUsers.map((user) =>
      user.id === id ? { ...user, status } : user,
    ),
  );
  

• 之后只需从 Firebase 重新加载数据；将获取代码重构为另一个函数，您可以在当前 useEffect 和 updateUser 处理程序中调用。