シャベル日記

Calendarクローンをエンコード中...

https://programmingwithmosh.com/react/build-a-react-calendar-component-from-scratch/
クラスコンポーネントで作成したCalendarコードをReact Hooks形式に再パッケージする場合は、先月、来月の矢印ボタンをクリックし、ステータス値が変更されると自動的に再レンダリングされます.

class Calendar extends React.Component {
  state = {
    dateObject: moment(),
  };

 onPrev = () => {
    this.setState({
      dateObject: this.state.dateObject.subtract(1, "month")
    });
  };
  onNext = () => {
    this.setState({
      dateObject: this.state.dateObject.add(1, "month")
    });
  };

ただし、上記のコードを初めてReact Hooks形式に変更すると、State値は変更されますが、再レンダリングは行われません.

function Calendar (){
  const [dateObject, setDateObject] = setState(moment());
  
  const onPrev = () => {
      let result = dateObject.subtract(1,"month")
      setDateObject(result);
    };
    const onNext = () => {
      let result = dateObject.add(1,"month")
      setDateObject(result);
    };
  

原因は簡単です.再レンダリングできない理由はReact LifeCycleが機能しないこと、LifeCycleが機能しない理由はstate値が変更されていないことです.

const onPrev = () => {
      let result = dateObject.clone().subtract(1,"month")
      setDateObject(result);
    };

矩()を初期状態値として指定したdateObjectのdateObjectを、矩ライブラリを使用して直接操作します.subtractはclone()メソッドを使用して置き換える可変メソッドで、正常に再レンダリングできることを示します.
後でclasscomponentをfunctioncomponentに変換する場合は、stateを変更する際にさらに注意してください.