☰

React Hooks useEffect で oldValues と newValues を比較するにはどうすればいいですか? 質問する

tag-icon • tag-icon reactjs react-hooks
React Hooks useEffect で oldValues と newValues を比較するにはどうすればいいですか? 質問する

3 つの入力があるとします: rate、sendAmount、receiveAmount。この 3 つの入力を useEffect diffing パラメータに入力します。ルールは次のとおりです。

  • sendAmountが変更された場合、計算しますreceiveAmount = sendAmount * rate
  • 受取金​​額が変更された場合、計算しますsendAmount = receiveAmount / rate
  • レートが変わったらreceiveAmount = sendAmount * rateいつ計算するか、いつsendAmount > 0計算するかsendAmount = receiveAmount / ratereceiveAmount > 0

コードサンドボックスはこちらhttps://codesandbox.io/s/pkl6vn7x6j問題を証明するため。

この場合、3 つのハンドラーを作成する代わりに、oldValuesおよびnewValuesを比較する方法はありますか?componentDidUpdate

ありがとう

これが私の最終的な解決策ですusePrevious https://codesandbox.io/s/30n01w2r06

この場合、useEffect各変更が同じネットワーク呼び出しにつながるため、複数は使用できません。そのため、changeCount変更を追跡するためにも を使用します。これは、changeCountローカルからの変更のみを追跡するのにも役立ち、サーバーからの変更による不要なネットワーク呼び出しを防ぐことができます。

ベストアンサー1

カスタムフックを書いて、useRefを使用した以前のプロパティ

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

そしてそれを使ってuseEffect

const Component = (props) => {
    const {receiveAmount, sendAmount } = props
    const prevAmount = usePrevious({receiveAmount, sendAmount});
    useEffect(() => {
        if(prevAmount.receiveAmount !== receiveAmount) {

         // process here
        }
        if(prevAmount.sendAmount !== sendAmount) {

         // process here
        }
    }, [receiveAmount, sendAmount])
}

useEffectただし、個別に処理したい変更IDごとに2つ別々に使用すると、より明確で読みやすく理解しやすくなります。

おすすめ記事