显然没有原因导致错误“TypeError：无法读取未定义的属性”答案

【问题标题】：Apparently no causes for the error "TypeError: Cannot read properties of undefined "显然没有原因导致错误“TypeError：无法读取未定义的属性”
【发布时间】：2022-01-26 23:45:28
【问题描述】：

我必须在布局中显示我从数据库中获取的一些数据。这是我用来获取数据的代码：

    const [array, setArray] = useState([])
    const collectionRef = collection(db, "Collection")
    const q = query(collectionRef, orderBy("Order", "desc"))

    useEffect(() => {
      auth.onAuthStateChanged(function (user) {
      if (user) {
             onSnapshot(q, (data) =>
             setArray(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
         );
      }
    })
   }, [auth]);

下面是html

    <div> 
        <h2>{array[0].Name}</h2>
    </div>

最让我困惑的是错误并不总是出现，有时一切正常，有时它在没有明显原因的情况下停止工作。如果我对数组执行console.log，有时它会打印数据并且一切正常，有时它会打印一个空数组并且什么都不做。我声明该数组永远不会被修改，它是在代码开头加载的，并且只读取数据。

【问题讨论】：

标签： html reactjs typeerror

【解决方案1】：

array 对于第一次渲染和所有其他渲染都是空的，直到返回数据。尝试类似：

<div> 
    <h2>{array.length && array[0].Name}</h2>
</div>

【讨论】：

谢谢，它有效，但为什么呢？
您正试图从array[0] 访问一个尚不存在的属性。 array.length 等价于array.length !== 0，所以array[0].Name 将在数组有东西之后被评估。