0

我目前正在开发一个预订应用程序，在这方面我需要从 API 获取一些数据。BigCalendar我正在使用 react + redux 来执行此操作，但是当状态更新时，我似乎无法更新此元素。BigCalendar它的初始化过程必须有某种对象。

BookingReducer.js

import { fetchBookingStart, fetchBookingsSuccess, fetchBookingsError } from '../types.js';

const initialState = {
    fetching: false,
    fetched: false,
    events: [],
    error: null
}


export default function (state = initialState, action) {
  switch (action.type) {
      case fetchBookingStart:
          return {
              ...state,
              fetching: true,
              fetched: false
          }
      case fetchBookingsSuccess:
          return {
              ...state,
              fetching: false,
              fetched: true,
              events: action.payload.bookings.length < 0 ? [] : action.payload.bookings.map(B => {
                  return {
                      id:22,
                      title: "testTitle",
                      description: B.description,
                      start: B.dateFrom,
                      end: B.dateTo,
                      room: B.room,
                      user: B.user
                  }
              })
          }

      case fetchBookingsError:
          return {
              ...state,
              fetching: false,
              error: action.payload.error
          }

      default:
          return state;
  }
}

bookingAction.js

import axios from "axios"; 
import { fetchBookingStart, fetchBookingsSuccess, fetchBookingsError } from '../types.js';
const apiUrl = "http://localhost/api/booking"; //CHANGE FOR PROD!

export const getBookings = () => dispatch => {
   let allUrl = apiUrl + "/find/";
   dispatch({type: fetchBookingStart});
   axios.get(allUrl).then(response => {
      console.log(response.data);
      dispatch({
          type: fetchBookingsSuccess,
          payload: response.data
      })
   }).catch(error => {
      dispatch({
          type: fetchBookingsError,
          payload: error
      });
   });
}

应用程序.js

import React, { Component } from "react";
import { connect } from 'react-redux';
import { getBookings } from './components/redux/actions/bookingActions';
import Link from "react-router-dom/Link";
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import "./style.css";
import 'moment/locale/da';
import BookingDialog from './components/booking_create_dialog/BookingDialog';
import Dialog from "material-ui/Dialog/Dialog";
import FlatButton from "material-ui/FlatButton/FlatButton";
let isDialogOpen = false;
moment.locale('da');

BigCalendar.momentLocalizer(moment);

function eventStyleGetter(event, start, end, isSelected) {
    let style = { backgroundColor: "" }
    switch (event.room) {
        case "sal":
            style.borderColor = "#781B7F";
            style.backgroundColor = "#781B7F";
            break;
        case "cafe":
            style.borderColor = "#067F3D";
            style.backgroundColor = "#067F3D";
            break;
        default:
            break;

    }
    return { style: style };
}

class App extends Component {
    componentWillMount() {
        this.props.getBookings();
    }
    componentDidUpdate() {
        if (this.props.fetched === true && this.props.fetching === false)     {
        this.refs.BigCalendar.forceUpdate();
    }
}
render() {
    return (
        <div className="MainContainer">
            {/*<Link to="/login"><FlatButton>Login</FlatButton></Link>*/}
            <div className="CalendarContainer">
                <BigCalendar
                    ref="BigCalendar"
                    selectable
                    className="Calendar"
                    events={this.props.events}
                    defaultView="week"
                    defaultDate={new Date()}
                    step={60}
                    eventPropGetter={eventStyleGetter}

                />
            </div>
            <div className="TestContainer">
                <button onClick={() => {
                    this.props.events.push({
                        id: 55,
                        title: "test event",
                        allDay: true,
                        start: new Date(),
                        end: new Date()
                    }); console.log(this.props.events)
                }}> bookigns </button>
                {this.props.events.map(E => <h1> {E.room} </h1>)}
            </div>
        </div>
    )
}
}

const mapStateToProps = state => ({
    events: state.bookings.events,
    fetched: state.bookings.fetched,
    fetching: state.bookings.fetching
})

export default connect(mapStateToProps, { getBookings })(App);

请指出任何可以帮助我正确执行此操作的错误。

4

1 回答 1

0

我的 react-redux 设置遇到了类似的问题，并意识到我的事件对象数组的格式不正确。除了检查这一点，我还要检查BigCalendar是否从一开始就被渲染了this.props.events。每次events为BigCalendar更改 prop 时，它都会自行更新。

于 2018-07-16T19:07:47.090 回答