javascript - Firebase:snapshot.val 不是函数或其返回值不可迭代
问题描述
所以我正在使用 Express、Firebase 和 ReactJS 创建一个小型应用程序。我偶然发现了 Firebase snapshot.val 的问题
express 上的这部分代码是通过 ID 为我的旅行提供服务并获取所有信息。对于所有旅行都很好,但是当我尝试去单次旅行时,它返回给我这个错误
如果我将它解构为一个数组:
UnhandledPromiseRejectionWarning:TypeError:snapshot.val 不是函数或其返回值不可迭代
如果我将它解构为一个对象:
TypeError:无法解构
trip
“未定义”或“空”的属性。
我完全困惑,找不到解决方案。
这是代码的一部分:
const firebase = require('firebase');
const reference = () => firebase.database().ref('/trips')
exports.getSingle = async (id) => {
//const snapshot = await reference()
// .orderByChild('id')
// .equalTo(id)
// .limitToFirst(1)
// .once('value');
// const [trip] = snapshot.val();
// return trip
const snapshot = await reference()
.orderByChild('id')
.equalTo(parseInt(id, 10))
.limitToFirst(1)
.once('value');
let trip = [];
snapshot.forEach(function (tripSnapshot) {
tripStorage = tripSnapshot.val();
console.log(tripStorage);
trip.push(tripStorage);
});
console.log(trip);
return trip;
};
exports.getAll = async () => {
const snapshot = await reference().once('value');
return snapshot.val();
};
我在前端获取旅行:
componentDidMount() {
fetch("/api/trips/get/" + this.state.id)
.then(res => res.json())
.then(trip =>
this.setState({
trip
}, () => console.log("Trips fetched...", trip))
);
}
行程控制器:
const express = require('express');
const route = express.Router();
const tripUtil = require('../utils/tripUtil');
route.get('/getAll', async (req, res) => {
const trips = await tripUtil.getAll();
res.json(trips);
});
route.get('/get/:id', async (req, res) => {
const { id } = req.params;
const trip = await tripUtil.getSingle(id);
if (trip) {
res.json(trip);
} else {
res.status = 400;
res.json({
error: 'trip not found'
});
}
});
module.exports = route;
并像这样从对象映射属性:
{this.state.trip.itinerary.days.map((day, i) => {
return (
<div key={i} className="trip-single-item__day">
<div className="trip-single-item__day-header">
<div className="trip-single-item__day-title">
{day.title}
</div>
<div className="trip-single-item__day-subtitle">
{day.subtitle}
</div>
<div className="trip-single-item__day-date">
{day.date}
</div>
</div>
<div className="trip-single-item__day-body">
<div className="trip-single-item__day-descritpion">
{day.description}
</div>
</div>
</div>
);
})}
有什么建议或方向吗?谢谢
解决方案
Firebase 通常建议不要将数据作为数组存储在实时数据库中(尽管存在一些例外情况):https ://firebase.googleblog.com/2014/04/best-practices-arrays-in-firebase.html
我猜正在发生的事情是,由于某种原因,您的快照值没有被呈现为数组,而是一个带有数字键的对象。造成这种情况的一个原因可能是 Firebase 中的键不是严格顺序的,因为如果数据的键以 0 开头并且没有间隙,Firebase 只会将您的数据呈现为数组。
你能试试这个代码看看它是否有效吗?
exports.getSingle = async (id) => {
const snapshot = await reference()
.orderByChild('id')
.equalTo(id)
.limitToFirst(1)
.once('value');
const queryResult = snapshot.val()
console.log(queryResult) // Make note of the object shape here. Make sure there are actually results.
const trip = Object.values(queryResult)[0]
return trip;
};
推荐阅读
- c# - PRISM navigationService 在 ViewModel 构造函数中为空
- node.js - 在 nodejs 环境的 aws lambda 模块中发出请求时,为两个特定域返回 403
- java - java - 有没有办法获取给定日期字符串的模式或从 LocalDate
- eclipse - gerrit 配置中 rules.pl 中管理组的绕过规则
- c# - 在 C# 中加入两个条件
- angular - 有没有办法解决 Angular 版本 8 上服务器端渲染中的本地存储问题?
- python-3.x - 如何在数据框中绘制组的数量?
- c# - 使用 Material Design 时更改 ListViewItem 背景颜色
- python - 如何在 Python 中构建重启按钮?
- c++ - 从具有多个源文件的共享 c++ 库中调用 python 中的函数