使用 React Hooks 从 firebase 读取数据到数组中

Question

我想从firebase 读取一个应该放在array 中的日期。已实现日历，它从array 检索数据。 array 的布局看起来像 const 事件。但是，此数据是静态的，我想通过从 firebase 中提取数据来更改它。

页面加载的那一刻，将使用useEffect读取数据库，如果我然后console.log(state);我会延迟几秒钟看到firebase的值。但是，当我尝试通过React hooks 将其添加到state 时，它会继续执行useEffect() 函数（参见console.log 中的图像）。目前firebase中只有1个object，当然还会更多。

实际上页面加载的那一刻，事件应该从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:]

Answer 1

当它以这种方式编写时useEffect(() => {}) 它总是在组件重新呈现时运行。

当它以这种方式编写时useEffect(() => {}, []) 它只运行一次，因为没有依赖关系。在这种情况下，它的作用类似于componentDidMount，因为它没有依赖项，因此它只在组件安装时运行。

当它以这种方式编写useEffect(() => {console.log(variable)}, [variable]) 时，它只会在第一次挂载时运行，然后在变量更改时运行。如果变量没有改变，即使发生重新渲染，函数也不会运行。

您可以在https://reactjs.org/docs/hooks-effect.html阅读更多内容