使Firebase运行两次的代码示例

我试图连接到一个数据库，获得数据：将它们推送到一个useState数组中。但当我在控制台记录它们时，相同的数据被推送到数组中两次。

import db from '../firebase.config';
import { collection, getDocs } from 'firebase/firestore';
import { useState, useEffect } from "react";

export default function Acs(){

const [acs, setAcs] = useState([])

//const querySnapshot = await getDocs(collection(db, "products"));
//querySnapshot.forEach((doc) => {
//    console.log(`${doc.id} => ${doc.data()}`)
//})

useEffect(() => {
    fetchAcs();
}, [])

const fetchAcs = async() => {
    const querySnapshot = await getDocs(collection(db, "products"));
    querySnapshot.forEach((doc) => {
        setAcs(arr => [...arr, doc.data()])
    })
    console.log(await acs)
}

return(
    <div>
        {
            acs.map(res => {
                return(
                    <div className="acs" key={res.id}>
                        <h4>{res.name}</h4>
                        <p>{res.price}</p>
                    </div>
                )
            })
        }
    </div>
)
}