如何访问从 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

由于空数组是真值，您需要在 return

中执行此操作

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

需要检查items[1]，在渲染的时候，只有items有数据才能访问。 当它为空时，访问 id 会给你你发布的错误。