シャベル日記
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を変更する際にさらに注意してください.
Reference
この問題について(シャベル日記), 我々は、より多くの情報をここで見つけました https://velog.io/@rjc1704/삽질일기-01テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol