Api调用填充一个数组而不填充另一个数组



所以我调用了我的firebase后端,它填充了items数组。当我将items数组设置为console.log时,所有东西都在那里,但当我将data设置为items并将数据数组设置为conole.log时它是空的。那么,为什么setData不起作用呢。数据数组仅在重新发送后才显示正确,但在最初显示时不正确。

const [data, setData] = useState<DocumentData[]>([]);
const [loader, setLoader] = useState(true)
async function getData() {
const ref = firebase.firestore().collection("bagels")
ref.onSnapshot((query) => {
const items: SetStateAction<DocumentData[]> = []
query.forEach((doc) => {
items.push(doc.data())
})
if(items){
setData(items)
setLoader(false)
console.log(items)
console.log(data)
}
})
}
useEffect(() => {
getData()
}, [])
return (
<div className="App">
<h1>BAGELS!</h1>
{loader === false && (data.map((doc) => {
<div key={doc.id}>
<h1>Name: {doc.name}</h1>
<p>Price: {doc.price}</p>
</div>
}))}
</div>
);
}
const items: SetStateAction<DocumentData[]> = []
async function getData() {
const ref = firebase.firestore().collection("bagels")
ref.onSnapshot((query) => {
query.forEach((doc) => {
items.push(doc.data())
})
})
}
useEffect(() => {
getData().then(()=>{
setData(items)
setLoader(false)
})
}, [])

希望能有所帮助。

最新更新