[InputDate] イベント内でstateを更新した後、再度stateの値を取得しても更新前の値が取得される – MESCIUS ナレッジベース

作成日: 2023/03/31 最終更新日: 2023/08/08

文書種別

制限事項

発生環境

React

状況

回避方法あり

詳細

イベント内で特定のstateを更新するように設定します。その後再度、同一のイベントが発生した時に該当のstateの値を取得しても、stateに設定した初期値が取得されます。

これはWijmoのパフォーマンス向上のためにレンダリングコストを回避するように意図された仕様に基づく動作となります。

回避方法1

react-use-event-hookのuseEventを利用して、stateを更新する方法がございます。

import useEvent from 'react-use-event-hook';
const [test, setTest] = React.useState(new Date());

const handleValueChanged = useEvent(
  (sender) => {
    console.log('valueChanged');
    console.log('test utc', test);
    //senderの値はutcであるため実際の値はtoLocaleDateStringで取得する
    console.log('test local', test.toLocaleDateString());
    setTest(sender.value);
  },
  [test]
);

<InputDate format="yyyy/MM/dd(ddd)" valueChanged={handleValueChanged} />

回避方法2

useEffectを利用してコンポーネントのマウント時／アンマウント時にイベントハンドラーを追加・削除する方法がございます。

React.useEffect(() => {
  // コンポーネントのマウント時にイベントハンドラーを追加する
  const inputDateControl = inputDateRef.current?.control;
  if (inputDateControl) {
    inputDateControl.valueChanged.addHandler(handleValueChanged);
  }
  // コンポーネントがアンマウント時にイベントハンドラーを削除する
  return () => {
    if (inputDateControl) {
      inputDateControl.valueChanged.removeHandler(handleValueChanged);
    }
  };
}, [test1]);

<InputDate format="yyyy/MM/dd(ddd)" ref={inputDateRef} />