Функциональный компонент не перерендеривается, в чём проблема?

import React, {useState} from 'react'
import moment from 'moment'
function Component() {
  const [date, setDate] = useState(moment())
  return (
    <div>
      {date.month()}
      <button onClick={() => setDate(date.add(1, 'month'))}>+1</button>
      </div>
  )
}
export default Component

https://codesandbox.io/s/billowing-bash-jp5h8
Библиотека moment js, я хочу при нажатии на кнопку менять месяц, но компонент не перерендеривается
(с компонентами-классами работает)
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
@slide13
frontend/web-developer
Артур Галяев, у вас значение date не меняется, т.к. объект moment мутабельный и при манипуляциях с датой не меняет ссылку на исходный объект, date.add(1, 'month') это тот же самый объект момент. Если вам нужно в стейте хранить именно весь объект moment либо добавьте .clone() в конце, чтобы клонировать объект момент:
date.add(1, 'month').clone()
либо вместо moment используйте иммутабельную библиотеку для работы с датами, например, dayjs
Я, в принципе, не советую moment использовать, когда есть более легковесные аналоги (moment - 70.4
kB, dayjs - 2.8kB)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы