从firebase抓取数据很好，但当我重新加载应用程序时不能渲染

Question

当添加这段代码时，应用程序按预期运行，但当我重新加载应用程序时，它会停止呈现，并给我一个完整的空白页面

</div>
<div className="chat__body">
{messages.map((message) => (
<p className={`chat__message ${true && "chat__reciever"}`}>
<span className="chat__name">{message.name}</span>
{message.message}
<span className="chat__timestamp">
{new Date(message.timestamp?.toDate()).toUTCString()}
</span>
</p>
))}
</div>

在检查Uncaught TypeError:消息时显示此消息错误。Map不是函数

有人知道我做错了什么吗?

Answer 1

您没有提供足够的代码，但我猜您可能没有考虑到您的Firebase数据的加载时间。messages.map是罪魁祸首，您试图循环消息，但它们最初是空的，直到Firebase有机会将数据发送给您。

您需要在访问数据之前检查数据是否已加载。伪代码的一个简单例子是:

const [isLoading, set_isLoading] = true;
getFirebaseData().then(() => set_isLoading(false))
if(isLoading) return "Loading...";
return <div>{messages.map( ... )}</div>

但是我建议使用可以为您提供这种功能的firebase库。

另一个解决方法也是使用可选链接来获得更安全的代码:messages?.map代替messages.map

Answer 2

我有这个const [messages, setMessages] = useState("");，如果我把它改为const [messages, setMessages] = useState([]);它工作