1

ここで実際の例を作成しました: https://codesandbox.io/s/magical-flower-o0gyn?file=/src/App.js

非表示ボタンをクリックすると、更新されたデータをローカル ストレージに保存します。

  1. 最初の列で非表示をクリックします。setValueWithCallback実行し、コールバックを参照に設定し、状態を設定します
  2. useEffect起動し、更新されたデータでコールバックを呼び出します
  3. saveToLocalStorage依存関係としてuseCallbackwithセットで呼び出されますdata

問題は 3 番目のステップにあります。localstorage に保存されるのは{visible: true}両方の場合です。この行を変更するかどうかはわかります：

const saveToLocalStorage = useCallback(() => {
  localStorage.setItem(
    `_colProps`,
    JSON.stringify(data.map((e) => ({ id: e.id, visible: e.visible })))
  );
}, [data]);

これに：

const saveToLocalStorage = localStorage.setItem(
  `_colProps`,
  JSON.stringify(data.map((e) => ({ id: e.id, visible: e.visible })))
);

それは動作しますが、最初の動作がうまくいかない理由を理解できません。私はそれが何らかの閉鎖に違いないと思いますが、私はそれを見ません。

dataが既に更新されていて、コールバックを実行した場合useEffect、依存関係配列で更新されないのはなぜですか?. はい、例は奇妙で、2番目の解決策は完全に問題ありません。問題を実証したかっただけです。助けてくれてありがとう！

4

2 に答える 2

0

あなたdataは配列型でありshallow comparison、状態の更新が発生したときにのみ反応するため、基本的にはdata値の変更ではなく参照の変更をチェックします。data'sそのため、値が変更されたときに saveToLocalStorage が再開されません。

于 2021-02-06T14:11:21.077 に答える