Я пытаюсь прочитать с firebase дату, которая должна быть помещена в array. Календарь был реализован, и он извлекает данные из array. Макет array выглядит как постоянные события. Однако эти данные имеют статус c, и я хочу изменить это, извлекая данные из firebase.
В момент загрузки страницы база данных будет считываться с помощью useEffect, если я тогда console.log(state);, я получу значение firebase с несколькими секундами задержки. Однако, когда я пытаюсь добавить его в state с помощью React hooks, он продолжает выполнять функцию useEffect() (см. Изображение из console.log). На данный момент есть только 1 object в firebase, но, конечно, их будет больше.
На самом деле, в момент загрузки страницы события должны считываться из firebase. Их можно найти в firebase under / events, затем эти события необходимо добавить в массив eventDb, который будет перезагружен позже в <Calendar events = {eventDb}.
Возможно ли это реализовать? и что я делаю не так, что делает это с помощью функции useEffect?
Я открываю React, и это одна из вещей, которую я хотел бы изучить.
Код:
import React , {useEffect} from "react";
import { useState } from 'react';
import { makeStyles } from "@material-ui/core/styles";
import styles from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { Col } from "react-bootstrap";
import 'react-big-calendar/lib/css/react-big-calendar.css'
import { Calendar, momentLocalizer, Views } from 'react-big-calendar'
import moment from 'moment';
import Firebase from 'firebase';
const localizer = momentLocalizer(moment);
function rand() {
return Math.round(Math.random() * 20) - 10;
}
function getModalStyle() {
const top = 50 + rand();
const left = 50 + rand();
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
const events = [
{
id: 0,
title: 'Board meeting',
start: new Date(2020, 1, 10, 9, 0, 0),
end: new Date(2020, 1, 10, 9, 15, 0),
resourceId: 1,
},
{
id: 1,
title: 'MS training',
desc: 'this is a test',
start: new Date(2020, 1, 10, 9, 0, 0),
end: new Date(2020, 1, 10, 9, 15, 0),
resourceId: 2,
},
{
id: 1,
title: 'MS training',
start: new Date(2020, 1, 10, 9, 10, 0),
end: new Date(2020, 1, 10, 9, 25, 0),
resourceId: 2,
},
{
id: 2,
title: 'Team lead meeting',
start: new Date(2018, 0, 29, 8, 30, 0),
end: new Date(2018, 0, 29, 12, 30, 0),
resourceId: 3,
},
{
id: 11,
title: 'Birthday Party',
start: new Date(2018, 0, 30, 7, 0, 0),
end: new Date(2018, 0, 30, 10, 30, 0),
resourceId: 4,
},
]
export default function CalendarDesk() {
const [eventDb, setEventDb] = useState([]);
useEffect(() => {
let ref = Firebase.database().ref('/events');
ref.on('value' , snapshot => {
var state = snapshot.val();
setEventDb([...eventDb,{
title: state.title,id: state.id,resourceId: state.resourceId,start: state.start,end: state.end
}]);
});
} );
console.log(eventDb);
const service = [{
id: 1,
name: 'Knippen',
price: 11.53,
time: 10.00,
amount: 1
},
{
id: 2,
name: 'Scheren',
price: 10.82,
time: 10.00,
amount: 1
},
{
id: 3,
name: 'Wassen',
price: 12.66,
time: 10.00,
amount: 1
}]
const resourceMap = [
{ resourceId: 1, resourceTitle: 'Robin Frissen' },
{ resourceId: 2, resourceTitle: 'Raoul Frissen' },
{ resourceId: 3, resourceTitle: 'Joppe Meijers' },
]
let today = new Date();
return (
<div>
<Container>
<h3>Agenda</h3>
<Row >
<Col md={12} >
<Calendar
events={eventDb}
localizer={localizer}
defaultView={'day'}
views ={['day', 'work_week']}
step={5}
defaultDate={new Date()}
min={new Date(today.getFullYear(),today.getMonth(), today.getDate(), 8)}
max={new Date(today.getFullYear(), today.getMonth(), today.getDate(), 18)}
resources={resourceMap}
resourceIdAccessor="resourceId"
resourceTitleAccessor="resourceTitle"
/>
</Col>
</Row>
</Container>
</div>
);
}
console.log:] 