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

Question

[Артур Галяев]

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, я хочу при нажатии на кнопку менять месяц, но компонент не перерендеривается
(с компонентами-классами работает)

Comments

[Дмитрий]

По ссылке открывается компонент без кода, отобразите относящийся к делу код в теме

[Артур Галяев]

Дмитрий, добавил

[Дмитрий]

Артур Галяев, Чтобы что-то перерендеривалось у этого чего-то должны поменяться свойства, я не вижу чтобы в вашу функцию приходили какие-то свойства. И непонятно почему функция не стредлочная.

[Aves]

https://reactjs.org/docs/hooks-reference.html#bail...

Answer 1

[Алексей]

Артур Галяев, у вас значение date не меняется, т.к. объект moment мутабельный и при манипуляциях с датой не меняет ссылку на исходный объект, date.add(1, 'month') это тот же самый объект момент. Если вам нужно в стейте хранить именно весь объект moment либо добавьте .clone() в конце, чтобы клонировать объект момент:
date.add(1, 'month').clone()
либо вместо moment используйте иммутабельную библиотеку для работы с датами, например, dayjs
Я, в принципе, не советую moment использовать, когда есть более легковесные аналоги (moment - 70.4
kB, dayjs - 2.8kB)

Comments

[Yustas Alexu]

Еще date-fns как альтернатива.