Firestore 阵列答案

【问题标题】：Firestore arraysFirestore 阵列
【发布时间】：2021-08-23 21:09:45
【问题描述】：

我在从 firebase firestore 加载数组时遇到问题。

我的代码：

 const [trackscreenData, setTrackscreenData] = useState('');

    useEffect(() => {
        // Alleen preview
           function getTracksData() {
                let TrackData = firebase
                    .firestore()
                    .collection('TrackScreen')
                    .doc('LeerjarenData')
                    .get();
                if (!TrackData.exists) {
                    console.log('No Data')
                } else {
                    let TrackDatav2 = TrackData.data();
                    setTrackscreenData(TrackDatav2) 
                }
           } getTracksData()
    }, [])

    console.log(trackscreenData.ModulePbs1);

这很完美，它会加载数据，但是当我将控制台更改为

console.log(trackscreenData.ModulePbs1[0]);

保存控制台仍然给我我想要的数据，但是当我重新加载它给我以下错误

TypeError: Cannot read property '0' of undefined

所以当我只加载整个数组时它没有问题但是当我想要从数组中进行特定查询时，在第一次渲染时它给了我这个错误，因为我猜数据没有加载但是我该如何解决这个问题?

【问题讨论】：

useState({ModulePbs1: []}) 应该解决它。它仍然会记录undefined，因为它是一个空数组，但不会抛出错误..
@FrankvanPuffelen 所以这是一个问题，我没有使用代码，而是使用 Firebase 的其他东西，现在很好，但这里的答案是很好的答案，但不是我想要的答案跨度>
在这种情况下，请考虑发布您自己解决问题的答案。没有它，这个页面对于将来登陆这里的任何人都将毫无用处。请记住：在 Stack Overflow 上，我们不（只是）帮助您解决问题，我们还在为未来的开发人员构建知识库。

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

您需要将状态的默认值定义为数组，而不是字符串：

const [trackscreenData, setTrackscreenData] = useState([])

否则，console.log(trackscreenData.ModulePbs1[0]) 第一次运行时会变成 ''[0]，这不是一个有效的语句。

【讨论】：

【解决方案2】：

getTracksData() 仍将获取数据。您需要执行以下操作：


   const [trackscreenData, setTrackscreenData] = useState([]);
    useEffect(() => {
               firebase
                    .firestore()
                    .collection('TrackScreen')
                    .doc('LeerjarenData')
                    .get().then(docs=>{
                        setTrackscreenData(docs.docs.map(doc=> ({id: doc.id, 
                       ...doc.data()}))
}
)
    }, [])

    console.log(trackscreenData);

【讨论】：

感谢您的回答。我认为您误解了这个问题，但不确定。我正在从我想存储在数组中的firestore中加载多个文档以做出反应。我在 firestore 中有一个数组，我想在 react 中加载它。
我现在也没有得到你，因为 firebase firestore 将文档存储在对象数组中。那么我在那里做的事情就是映射所有文档（数组）并将这些文档设置为状态。你试过代码了吗？

【解决方案3】：

const [trackscreenData, setTrackscreenData] = useState('');

trackscreenData 的初始值是一个空字符串，但您希望它是一个具有属性 ModulePbs1（一个数组）的对象。所以你的初始状态应该是：

const [trackscreenData, setTrackscreenData] = useState({ModulePbs1: []});

现在trackscreenData 有一个属性ModulePbs1，但它是一个空数组，所以console.log(trackscreenData.ModulePbs1[0]) 将记录undefined。您可以使用 if 语句检查是否为空：

if (!trackscreenData.ModulePbs1.length) { 
  console.log("array empty") 
} else {
  console.log(trackscreenData.ModulePbs1)
}

【讨论】：