Управление датами Momentjs в ReactJS

Question

У меня есть основное приложение для проверки ES6 и я пытаюсь использовать momentJS для управления некоторыми датами. По некоторым причинам я получаю month.add is not a function

В настоящее время код у меня есть это:

export default class CalendarApp extends React.Component { 

constructor() { 
    super(); 

    this.state = { 
     currentDate: Moment().format(), 
     month: Moment().format('MMMM'), 
     year: Moment().format('YYYY') 
    } 

    // Bind Methods to this 
    this.previousMonth = this.previousMonth.bind(this); 
    this.nextMonth = this.nextMonth.bind(this); 
} 

previousMonth() { 
    let month = this.state.month; 
    month.add(-1, 'months'); 
    this.setState({ 
     month: month 
    }) 
} 

nextMonth() { 
    let month = this.state.month; 
    month.add(1, 'months'); 
    this.setState({ 
     month: month 
    }) 
} 

render() { 
    return (
     <div className="calendar"> 
      <div className="calendar-container" style={ hideCalendar }> 
       <caption> 
        <button className="previous-month" onClick={ this.previousMonth }>Prev</button> 
        <button className="next-month" onClick={ this.nextMonth }>Next</button> 
        <div className="calendar-month"> 
         <span>{ this.state.month } { this.state.year }</span> 
        </div> 
       </caption> 
      </div> 
     </div> 
    ) 
} 

}

Я пробовал различные варианты установки начального состояния с помощью Moment().month() т.д., но ничего не похоже на работу. Любая помощь приветствуется.

Answer 1

Когда вы делаете .format(), вы превращаете его в строку, это уже не объект momentJS.

moment().add(1, 'months') // A moment object 

moment().add(1, 'months').subtract(6, 'days') // Can still manipulate 

moment().add(1, 'months').subtract(6, 'days').format() // A final string, can't call moment funcs on it 

Также нет необходимости создавать несколько объектов, если они все используют то же самое время -

const momentNow = Moment(); 

this.state = { 
    currentDate: momentNow.format(), 
    month: momentNow.format('MMMM'), 
    year: momentNow.format('YYYY') 
} 

Answer 2

Ваш state.month является строкой. Это вызывает проблему.

Попробуйте это

constructor() { 
    super(); 

    this.state = { 
     currentDate: Moment(), 
     month: Moment().format('MMMM'), 
     year: Moment().format('YYYY') 
    } 

    // Bind Methods to this 
    this.previousMonth = this.previousMonth.bind(this); 
    this.nextMonth = this.nextMonth.bind(this); 
} 

previousMonth() { 
    let date = this.state.currentDate; 
    date.add(-1, 'months'); 
    this.setState({ 
     currentDate: date, 
     month: date.format('MMMM'), 
     year: date.format('YYYY') 
    }); 
} 

nextMonth() { 
    let date = this.state.currentDate; 
    date.add(1, 'months'); 
    this.setState({ 
     currentDate: date, 
     month: date.format('MMMM'), 
     year: date.format('YYYY') 
    }); 
}