如何访问从Firestore返回的对象属性？

Question

我是React的初学者，有一个小问题，我无法理解。

我成功地从Firestore中检索数据并更新了状态items。当我记录item[1]时，它返回了具有预期属性id、name、description的对象，但当尝试item[1].id时，它给了我无法读取未定义错误的属性"id">

你能告诉我这里可能出了什么问题吗？

这就是我的代码看起来像

import React, { useState, useEffect, useCallback } from 'react';
import db from '../../../firestore';
const Carousel = () => {
const [items, setItems] = useState([]);
useEffect(() => {
db.collection('destinations')
.get()
.then(querySnapshot => {
const data = [];
querySnapshot.docs.map(doc => {
data.push(doc.data())
})
setItems(data);
}).catch(err => console.log(err));
}, [])
return (
<div>
{console.log(items[1])} {/* This works  */}
{console.log(items[1].id)} {/* This gave error */}
</div>
)
};
export default Carousel;

Answer 1

由于emtpy数组是一个真实的值，您需要在返回的中执行此操作

return (
<div>
{items[1] &&
<div>{items[1].id}</div> 
}
</div>
)

您需要检查items[1]，当它正在渲染时，只有当items有数据时才能访问。当它为空时，访问id将显示您发布的错误。