useEffect 不会在 React JS 中自动渲染页面

Question

我正在尝试在 React JS 中使用 useEffect 从 firebase 获取数据，但我的问题是它不会在数据库发生任何更改时自动更新/呈现页面。

我试过了

const [users,setUsers]=useState([]);

const usersCollectionRef=collection(db,"customers");

useEffect(()=>{
        const getUsers=async ()=>{
            const data=await getDocs(usersCollectionRef);
            setUsers(data.docs.map((doc)=>({...doc.data(),id:doc.id})))
        };
        getUsers();
        console.log(users)
    },[])

这里返回数据

return (
    <div className="App">
        {users.map((user)=>{
            return <h1 key={user.id}>{user.id}</h1>
        })}
    </div>
  )

请帮我解决这个问题

Answer 1

在上面的代码中，由于依赖数组为空，useEffect 将只执行一次。您可以删除依赖数组以重复执行，也可以传递变量以在变量中的数据发生变化时执行，如下所示：

useEffect(()=>{
    Code
 })

或者

useEffect(()=>{
    Code
},[Variables])

Answer 2

你的 useEffect 只会运行 once 因为你的 dependency list 是空的。

如果你想触发这个useEffect，你需要在依赖列表中添加一些条件。

更多相关信息：https://reactjs.org/docs/hooks-effect.html

Answer 3

只需使用 onSnapshot。它将更新集合中的每个更改。所以，回答

useEffect(() => {
        onSnapshot(usersCollectionRef, (snapshot) =>
            setUsers(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
        )
    }, [])

useEffect 不会在 React JS 中自动渲染页面

useEffect Doesnt render the page Automatically in React JS

reactjs

use-effect