【超凡ミス】propsで渡した関数が更新されなかった原因

プログラミング

Reactでpropsを操作して複数のチェックボックスを設置する際に、テキストは個別に渡ってるのに関数は後から読み込んだ処理が実行されてしまいました。

useEffectで取得した時点では問題ないのにonChange実行時は不具合が起きる。なぜだったのか？

挙動

  • チェックボックスを2つ作成する
  • チェックボックスはCheckboxコンポーネントを使って呼び出す
  • チェックボックスをクリックする
  • 片方のチェックボックスしか反応しない（どちらのチェックボックスを押しても片方のみ反応）

なぜか片方のチェックボックスしか反応しません。

結論

label、inputタグへの個別ID付与ができていませんでした。value、text変数は個別に取得できているのにonChangeが個別に反応しないのはなぜかを考えた時に、関数の書き方に問題があるのではないかと焦って数時間格闘してしまいました。

NGコード

簡略したコードですが、inputタグのIDを仮のまま設置していました。これにより片方のチェックボックスのみ反応していた形となります。死にたくなるほどの凡ミスです。

import React, { useState, useEffect } from "react";

type Props = {
  value: boolean;
  text: string;
  onChange: () => void;
};

export const Checkbox = ({ value, text, onChange }: Props) => {
  return (
    <div>
      <label htmlFor="id">
        <div>
          <input
            type="checkbox"
            id="id"
            checked={value}
            onChange={() => {
              onChange();
            }}
          />
        </div>
        <div>
          {text}
        </div>
      </label>
    </div>
  );
};

OKコード例

個別にidを追加しました。これで正常に反応しました。

import React, { useState, useEffect } from "react";

type Props = {
  //idを追加
  id: string;
  value: boolean;
  text: string;
  onChange: () => void;
};

export const Checkbox = ({ id, value, text, onChange }: Props) => {
  return (
    <div>
      <label htmlFor={id}>
        <div>
          <input
            type="checkbox"
            id={id}
            checked={value}
            onChange={() => {
              onChange();
            }}
          />
        </div>
        <div>
          {text}
        </div>
      </label>
    </div>
  );
};

まとめ

idがきちんと振られているかなんて当たり前すぎて完全に見落としていました。直近で関数の書き方によっては正常に反応しないことがあるよといった記事を読んでいたので、小手先のコードに気が飛んでいた格好になります。

本当に泣ける。

ー　この記事をシェアする？　ー

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。

Related / 関連記事