Firebase: snapshot.val не является функцией или ее возвращаемое значение не повторяется
Решение с дисплеем inline-block
Эта адаптивная сетка намного проще: меньше разметки и меньше CSS, поэтому ее проще будет внедрить на производственный сайт и адаптировать к вашим конкретным потребностям.
= >> DEMO & lt; = lt; = (изменить размер окна результатов, чтобы увидеть эффект)
html, body {
margin:0;
padding:0;
}
#container{
font-size:0;
margin:0 auto;
width:1000px;
}
.block {
font-size:20px;
width: 150px;
height: 150px;
margin:25px;
background: gold;
display:inline-block;
}
@media screen and (max-width: 430px) {
#container{
width:200px;
}
}
@media screen and (min-width: 431px) and (max-width: 630px) {
#container{
width:400px;
}
}
@media screen and (min-width: 631px) and (max-width: 830px) {
#container{
width:600px;
}
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
#container{
width:800px;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
Он включает в себя:
- 4 медиа-запроса для блоков шириной 200 пикселей и контейнер, расширяемый до 1000 пикселей. В зависимости от ширины элементов сетки и общей ширины вашего контейнера вам может потребоваться меньше или больше
- удаления пробелов между элементами встроенного блока (в следующем демо я использовал размер шрифта но вы можете использовать другие (см. Как удалить пространство между элементами встроенного блока? для других методов)
- фиксированные поля между блоками
Количество блоков в одной строке приспосабливается к размеру контейнера. Свойство text-align остается равным значению по умолчанию left, поэтому последние элементы выравниваются влево.
Поплавки с адаптивными полями между блоками и контейнером
= >> DEMO & lt; = lt; g23]
html, body {
margin:0;
padding:0;
min-width:150px;
}
.wrap {
float:left;
position:relative;
}
.foto {
width: 150px;
height: 150px;
background: gold;
position:absolute;
}
#warning{display:none;}
@media screen and (min-width: 631px) {
.wrap {
width:20%;
padding-bottom:25%;
}
.wrap:nth-child(4n+2), .wrap:nth-child(4n+3){
}
.wrap .foto {
top:-75px;
margin-top:100%;
right:-30px;
}
.wrap:nth-child(4n+2){
margin:0 5% 0 7.5%;
}
.wrap:nth-child(4n+3){
margin-right:7.5%;
}
.wrap:nth-child(4n+2) .foto{
left:50%;
margin-left:-75px;
}
.wrap:nth-child(4n+3) .foto{
right:50%;
margin-right:-75px;
}
.wrap:nth-child(4n) .foto{
left:-30px;
}
#container{
margin-top:-45px;
}
}
@media screen and (min-width: 481px) and (max-width: 631px) {
.wrap {
width:25%;
padding-bottom:33.3%;
}
.wrap:nth-child(3n+2){
margin:0 12.5%;
}
.wrap .foto {
top:-75px;
margin-top:100%;
right:-37px;
}
.wrap:nth-child(3n+2) .foto{
left:50%;
margin-left:-75px;
}
.wrap:nth-child(3n) .foto{
left:-37px;
}
#container{
margin-top:-37px;
}
}
@media screen and (min-width: 331px) and (max-width: 480px) {
.wrap {
width:33.3%;
padding-bottom:50%;
clear:left;
}
.wrap:nth-child(even) {
float:right;
clear:right;
}
.wrap .foto {
top:-75px;
margin-top:100%;
right:-50px;
}
.wrap:nth-child(even) .foto {
left:-50px;
}
.wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
bottom:-75px;
margin-bottom:100%;
}
#container{
margin-top:-25px;
}
}
@media screen and (max-width: 330px) {
.wrap {
width:50%;
padding-bottom:100%;
clear:left;
}
.wrap:nth-child(odd) .foto {
right:-75px;
bottom:0;
bottom:-75px;
margin-bottom:100%;
}
.wrap:nth-child(even) .foto {
top:0px;
right:-75px;
top:-75px;
margin-top:100%;
}
}
@media screen and (min-width: 751px) {
#warning{
color:#fff;
display:block;
position:fixed;
width:100%;
height:50%;
top:25%;
left:0;
background:#000;
text-align:center;
font-size:30px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
I haven't written the code for windows bigger than 751px.
You must resize this window under 751px.Этот метод включает в себя:
- floats
-
position:absolute; -
:nt-child()css селектор - медиа-запросы
Он центрирует блоки в своем контейнере и дает одинаковый марж в верхней / левой / тугой / нижней части всех блоков + сторон контейнера. Поскольку это решение использует поплавки, последняя строка выравнивается влево.
Количество блоков в одной строке приспосабливается к ширине окна.
2 ответа
Может быть предупреждение о необработанном отказе.
Обрабатывайте снимок с помощью then / catch
exports.getSingle = async (id) => {
await reference()
.orderByChild('id')
.equalTo(id)
.limitToFirst(1)
.once('value').then(snapshot => {
const [trip] = snapshot.val();
return trip
// console.log(post.id) if required
})
};
Firebase обычно рекомендует не хранить данные в виде массивов в базе данных реального времени (хотя существуют некоторые исключения): https://firebase.googleblog.com/2014/04/best-practices-arrays-in-firebase.html
Я предполагаю, что по какой-то причине значение вашего снимка отображается не как массив, а как объект с числовыми ключами. Одной из причин этого может быть то, что ключи в Firebase не являются строго последовательными, поскольку Firebase будет отображать ваши данные в виде массива, только если ключи данных начинаются с 0 и пробелов нет.
Можете ли вы попробовать этот код, чтобы увидеть, работает ли он?
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;
};