0

我正在学习 React 和 Redux。我被 react-dates 组件与 Redux 的连接卡住了。主要问题是某些东西（可能是 react-dates）会在应用程序开始时触发 redux 操作（SET_START_DATE、SET_END_DATE），即使它们应该在我单击日历内的日期之后发生。因此，我收到了这些错误：

Failed prop type: Invalid input type: `startDate` of type `string` 
supplied to `withStyles(DateRangePicker)`, expected `object`.

Failed prop type: Invalid input type: `endDate` of type `string` 
supplied to `withStyles(DateRangePicker)`, expected `object`.

Uncaught TypeError: date.format is not a function

带有 DatePicker 的组件代码：

import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

import React, {Component} from 'react';
import {connect} from 'react-redux';

import {DateRangePicker} from 'react-dates'
import {setEndDate, setStartDate} from "../actions/filters";

class Filters extends Component {

state = {
    calendarFocused: null
};

onDatesChange = ({startDate, endDate}) => {
    this.props.setStartDate(startDate);
    this.props.setEndDate(endDate);
};

onFocusChange = (calendarFocused) => {
    this.setState(() => ({calendarFocused}));
};

render() {
    return (
        <div>

            {
                <DateRangePicker
                    startDateId="startDate"
                    endDateId="endDate"
                    startDate={this.props.startDate}
                    endDate={this.props.endDate}
                    onDatesChange={this.onDatesChange}
                    focusedInput={this.state.calendarFocused}
                    onFocusChange={this.onFocusChange}
                    showClearDates={true}
                    numberOfMonths={1}
                    isOutsideRange={() => false}
                />
            }

        </div>
    );
   }
}

function mapStateToProps(state) {
   return {
       startDate: state.filters.startDate,
       endDate: state.filters.endDate
   };
  }

function mapDispatchToProps(dispatch) {
   return {
       setStartDate: (startDate) => dispatch(setStartDate(startDate)),
       setEndDate: (endDate) => dispatch(setEndDate(endDate)),
   };
}

export default connect(mapStateToProps, mapDispatchToProps)(Filters);

行动：

// SET_START_DATE
export const setStartDate = (startDate) => ({
    type: 'SET_START_DATE',
    startDate
});

// SET_END_DATE
export const setEndDate = (endDate) => ({
    type: 'SET_END_DATE',
    endDate
});

减速机：

import moment from 'moment';

const filtersReducerDefaultState = {
    startDate: moment().startOf('month'),
    endDate: moment().endOf('month')
};

export default (state = filtersReducerDefaultState, action) => {
    switch (action.type) {

        case 'SET_START_DATE': {

            console.log(action.startDate);

            return {
                ...state,
                startDate: action.startDate
            }
        }

        case 'SET_END_DATE': {
            return {
                ...state,
                endDate: action.endDate
            }
        }

        default:
            return state;

    }
};

我正在使用这些依赖项：

  • “反应”：“^16.4.2”，
  • “反应日期”：“^17.2.0”，
  • "react-redux": "^5.0.7",
  • "redux": "^4.0.0",
  • “redux-thunk”：“^2.3.0”
4

0 回答 0