повторно визуализировать компонент при изменении Moment () - PullRequest
Новая
       0

повторно визуализировать компонент при изменении Moment ()

0 голосов
/ 27 мая 2020

Я делаю календарь с moment(), но у меня проблема с этим. 

const {useState} = React;

const Calendar = () => {
  const [value, setValue] = useState(moment());
  function handleClick(date){
    console.log('handleClick called', date);
    setValue(date);
  }
  return (
    <div>
      <button onClick={()=> handleClick(value.add(-1,'month')) }> - </button>
      <b>{ value.format('YYYY-MM') } </b>
      <button onClick={()=> handleClick(value.add(1,'month')) }> + </button>

    </div>
  );
}

const App = () => (<Calendar />)
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />

когда я нажимаю кнопку, свойство, очевидно, обновляется, но повторного рендеринга не происходит.

Я догадываюсь, что это о shallow compare, но я понятия не имею, как лучше всего решить эту проблему.

Заранее спасибо.

1 Ответ

2 голосов
/ 27 мая 2020

Вы можете использовать clone для создания нового экземпляра момента вместо изменения исходного. 

const {useState} = React;

const Calendar = () => {
  const [value, setValue] = useState(moment());
  function handleClick(date){
    console.log('handleClick called', date);
    setValue(date);
  }
  return (
    <div>
      <button onClick={()=> handleClick(value.clone().add(-1,'month')) }> - </button>
      <b>{ value.format('YYYY-MM') } </b>
      <button onClick={()=> handleClick(value.clone().add(1,'month')) }> + </button>

    </div>
  );
}

const App = () => (<Calendar />)
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />
...