Мои даты реакции DateRangePicker не работает / рендеринг при нажатии - PullRequest
Новая
       45

Мои даты реакции DateRangePicker не работает / рендеринг при нажатии

0 голосов
/ 15 июня 2019

Я создаю приложение для отслеживания избыточных расходов и использую moment.js и даты реагирования для установки времени и временного диапазона фильтра. Однако я получаю сообщение об ошибке, когда выбираю где-либо, или "x", чтобы очистить дату, тогда на экране ничего не отображается. 

expenses.js:9 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at expenses.js:9
    at Array.filter (<anonymous>)
    at expenses.js:5
    at Function.mapStateToProps [as mapToProps] (ExpenseList.js:17)
    at mapToPropsProxy (wrapMapToProps.js:41)
    at handleNewState (selectorFactory.js:44)
    at handleSubsequentCalls (selectorFactory.js:58)
    at pureFinalPropsSelector (selectorFactory.js:63)
    at Subscription.checkForUpdates [as onStateChange] (connectAdvanced.js:247)
    at Subscription.handleChangeWrapper (Subscription.js:70)

Я дважды проверил и все еще не могу найти, что не так ...

редукторы / фильтры: 

const filterReducerDefaultState = {
    text: '',
    sortBy: 'date',
    startDate: moment().startOf('month'),
    endDate: moment().endOf('month')
}

Вот селекторы / расходы.js: 

import moment from 'moment'

//Get visible expenses
export default (expenses, { text, sortBy, startDate, endDate }) => {
    return expenses.filter((expense) => {
        const createdAtMoment = moment(expense.createdAt)
        const startDateMatch = startDate ? startDate.isSameOrBefore(createdAtMoment, 'day') : true
        const endDateMatch = endDate? endDate.isSameOrAfter(createdAtMoment, 'day'): true
        const textMatch = expense.description.toLowerCase().includes(text.toLowerCase())

        return startDateMatch && endDateMatch && textMatch
    }).sort((a, b) => {
        if (sortBy === 'date') {
            return a.createdAt < b.createdAt ? 1 : -1
        } else if (sortBy === 'amount') {
            return a.amount < b.amount ?  1 : -1
        }
    })
}

Вот компоненты / ExpenseListFilters.js: 

import React from 'react'
import { connect } from 'react-redux'
import { DateRangePicker } from 'react-dates'
import { setTextFilter, sortByAmount, sortByDate, setStartDate, setEndDate } from '../actions/filters'

class ExpenseListFilters extends React.Component{
    state={
        calendarFocused: null
    }
    onDatesChange = ({startDate, endDate}) => {
        this.props.dispatch(setStartDate(startDate))
        this.props.dispatch(setEndDate(endDate))
    }
    onFocusChange = (calendarFocused) => {
        this.setState(() => ({ calendarFocused}))
    }
    render(){
        return (
            <div>
        <input 
        type="text" 
        value={this.props.filters.text} 
        onChange={(e) => {
            this.props.dispatch(setTextFilter(e.target.value))
        }} />
        <select 
        value ={this.props.filters.sortBy}
        onChange={(e)=> {
            if (e.target.value === 'date'){
                this.props.dispatch(sortByDate())
            } else if (e.target.value === 'amount') {
                this.props.dispatch(sortByAmount())
            }
        }}>
            <option value="date">Date</option>
            <option value="amount">Amount</option>
        </select>
        <DateRangePicker 
        startDate={this.props.filters.startDate}
        startDateId='startDateId'
        endDate={this.props.filters.endDate}
        endDateId='endDateId'
        onDatesChange={this.onDatesChange}
        focusedInput={this.state.calendarFocused}
        onFocusChange={this.onFocusChange}
        showClearDates={true}
        numberOfMonths={1}
        isOutsideRange={()=> false}
        />
    </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        filters: state.filters
    }
}
export default connect(mapStateToProps)(ExpenseListFilters)

Я ожидаю, что смогу очистить дату, нажав «X» на каландре, чтобы мои демонстрационные данные могли отображаться, или выберите определенный диапазон для фильтрации. Как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 15 июня 2019

Привет, я решил свою проблему сейчас: я забыл включить ... состояние в моих редукторах / фильтрах в: 

        case 'SET_START_DATE':
            return {
                startDate: action.startDate
            }
        case 'SET_END_DATE':
            return {
                endDate: action.endDate
            }

и должно быть: 

        case 'SET_START_DATE':
            return {
                ...state,
                startDate: action.startDate
            }
        case 'SET_END_DATE':
            return {
                ...state,
                endDate: action.endDate
            }
0 голосов
/ 15 июня 2019

Поскольку ошибка читается как Cannot read property 'toLowerCase' of undefined, ваша проблема в коде const textMatch = expense.description.toLowerCase().includes(text.toLowerCase())

Чтобы избежать подобных проблем, я хотел бы добавить значение по умолчанию, которое может выглядеть следующим образом 

export default (expenses, { text = '', sortBy, startDate, endDate }) => {
    return expenses.filter((expense = {}) => {
        const { description = '' } = expense
        const createdAtMoment = moment(expense.createdAt)
        const startDateMatch = startDate ? startDate.isSameOrBefore(createdAtMoment, 'day') : true
        const endDateMatch = endDate? endDate.isSameOrAfter(createdAtMoment, 'day'): true
        const textMatch = expense.description.toLowerCase().includes(text.toLowerCase())

        return startDateMatch && endDateMatch && textMatch
    }).sort((a, b) => {

При добавлении значения по умолчанию к тексту, расходам и описанию ваш код не выдаст ошибку - но проблема, скорее всего, не будет решена.

Чтобы решить эту проблему, я бы рекомендовал добавлять журналы консоли в каждую строку, чтобы убедиться, что значения соответствуют ожидаемым, или использовать встроенный в nodejs инструмент debugger

...