React 初期値と比べたい

Question

やりたいこと
初期値（inishiakState）から値が変わったらButtonを表示させてあげたいのですが
どうゆうロジックにしたらいいのでしょうか？
isbuttonShowみたいなstateを追加してbuttonの表示/非表示をbooleanで管理しようと思っているのですが
値が変わったらisbuttonShowを切り替えるといロジックにすると値が変わるごとにtrue/falseに切り替わってしまいます
どうしたらいいのでしょうか？
現在のstateと初期値をどう比べたらいいのかがわかりません

const TextLength = window.gon.text_length;
const Uppercase = window.gon.uppercase;
const lowerCase = window.gon.lowercase;

const initialState = {
  inputText: TextLength,
  upperCase: Uppercase,
  lowerCase: lowerCase,
  numbers numbers,
}

interface IState {
  inputText: number;
  upperCase: boolean;
  lowerCase: boolean;
  numbers: boolean
}

const index:FC = () => {
  const [state, setState] = useState<IState>(initialState);

const changeState = (key: keyof IState) => {
    setState({ ...state, ...{ [key]: !state[key] } });
  };

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setState({ ...state, inputText: e.target.valueAsNumber });
};

  <Input
   value={state.inputText}
   onChange={handleInputChange}
   />
   <Switch
    checked={upperState}
    onChange={() => changeState(state.upperCae)}
   />
   <Switch
    checked={upperState}
    onChange={() => changeState(state.lowerCase)}
   />
  // 値が変更されたらボタンを表示したい
  <Button
　 label= "保存ボタン"/ >

Answer 1

こんにちは

state と initialState とを比較して、少なくとも１つのプロパティの値が変わっていれば、ボタンを表示すればよいわけですが、では、２つのオブジェクトを比較して、内容が等しいかどうかを判定するにはどうしたらいいか？ということになります。そのような比較関数を自作してもよいですが、配列やオブジェクトの操作で便利なライブラリ、lodash に、

• _.isEqual

というメソッドがあるので、これを使って、以下のようにするとボタンの表示、非表示を切り替えられます。

{!_.isEqual(state, initialState) && <Button>保存</Button>}

以下は、上記のサンプルです。

• **動作確認用サンプル： **https://codesandbox.io/s/q251009-62k36

初期値は、 inputTextが0で、他の booleanのプロパティが false にしており、どれか１つでも変更されたらボタンが表示され、その後、どれも初期値と同じ値に戻ったときにはボタンは再度、非表示になります。

追記

tsx で使うなら、以下がより丁寧ですね。（動作確認用サンプルも以下に修正しました）

{!_.isEqual<IState>(state, initialState) && <Button>保存</Button>}

Comments

[satodesu]

返信ありがとうございます！！

[satodesu]

jsxではなくtsxなのですがどう書いたらいいのでしょうか？

[jun68ykt]

回答に挙げたコードは、tsx でもそのまま使えます。
動作確認用サンプルのリンク先も、index.tsx に Typescript で書いていますが、回答に挙げた
{!_.isEqual(state, initialState) && <Button>保存</Button>}
をそのまま使っています。

[jun68ykt]

回答のほうに追記しましたが、tsx の場合、 _.isEqualにジェネリクス <TState> を追加するとよいでしょう。

[satodesu]

ありがとうございます！！
関数で書いてやりたいのですが、どう比べたらいいのでしょうか？

[jun68ykt]

一例として、以下のような 関数 equalStates

const equalStates = (state1: IState, state2: IState) =>
Object.keys(state1).every((key: keyof IState) => state1[key] === state2[key]);

を作っておいて、

{!equalStates(state, initialState) && <Button>保存</Button>}

とすればよいかと思います。以下、使用例です。

https://codesandbox.io/s/q251009-k1rzn

[satodesu]

ありがとうございます。
キャンセルボタンも追加したく
{
!equalStates(state, initialState) &&
<Button>保存</Button>
<Button>キャンセル</Button>}

または
{
!equalStates(state, initialState) &&
<Button>保存</Button>
<Button>キャンセル</Button>}
としてみたのですが
Left side of comma operator is unused and has no side effects.t
というエラーが出てしまいます。
どうしてなのでしょうか？

[jun68ykt]

エラーの原因は、&& の後ろに１つのReactコンポーネントしか書けないところを、２つボタンを書いてるからです。以下のようにReact.Fragment の <> ・・・ </> でくくるか

{!equalStates(state, initialState) && (
<>
<Button>保存</Button>
<Button>キャンセル</Button>
</>
)}

または２つのボタンをくくるdivを追加すると良いでしょう。

{!equalStates(state, initialState) && (
<div>
<Button>保存</Button>
<Button>キャンセル</Button>
</div>
)}

複数のボタンを囲む div があったほうが後々、style を付けやすいかと思います。

[satodesu]

ありがとうございます。
!_.isEqualを使ってstateとinishialStateの特定の値だけを比べる方法ってあるのでしょうか？

[jun68ykt]

こんにちは。
そのご質問は、以下の問題と置き換えても大丈夫でしょうか？

たとえば、

type T = {
x: number;
y: number;
level: number;
status: string;
error: boolean;
}

という型Tがあり、この型Tの２つのオブジェクト a, b の内容が以下だったとします。

const a: T = {
x: 10,
y: 20,
level: 100,
status: "High",
error: false
};

const b: T = {
x: -1,
y: 10,
level: 100,
status: "High" ,
error: false
};

このとき、 やりたいことは

a と b の x, y の値は無視して、その他の3つのプロパティlevel, status, error の値が一致していれば true 、ひとつでも異なっていれば、falseを返すような判定を _. isEqual を使ってやりたい。
（上記の a と b は、その判定によれば「等しい」あるいは「変わっていない」ということになります）

ということで合ってますでしょうか？

[satodesu]

はい！！そうです

[jun68ykt]

なるほどですね。
それでは、 _. isEqual による比較対象として、比較したいプロパティのみを持つオブジェクトを作って、それらを比較すればよいでしょう。そのようなオブジェクトを作るには

_.pick
https://lodash.com/docs/#pick

を使います。以下、上記の型Tの変数a, b を使ったサンプルです。

https://codepen.io/jun68ykt/pen/RwWwoPP?editors=0012