Reactでチェックボックスでstateを変更したときにでるエラーを解消したい

Question

useContextで受け取ったarrayに対して表示/非表示を切り替えるために
以下のようなチェックボックスを実装しました。
チェックボックスをクリックしたタイミングでエラーが発生します。
対処方法を教えてください。mm

作ったコンポーネント

const ActivityPanel = () => {
  const [{ array}] = React.useContext(AppContext);
  const [visibillities, setVisibillities] = React.useState({});

  const handleVisibillityChange = React.useCallback((e) => {
    e.persist();

    const newState = {};
    newState[e.target.value] = true; // ★e.target.value → "value"など定数にするとエラーが発生しない。
    setVisibillities((prevState) => ({ ...prevState, ...newState })); // この行でエラーが発生。
  }, []);

  const Visibillities = Object.keys(array).map((k, i) => (
    <label key={k}>
      <input
        type="checkbox"
        value={k}
        checked={visibillities[k]}
        onChange={handleVisibillityChange}
      />
      <span>{k}</span>
    </label>
  ));

  return <>{Visibillities}</>;
};

エラー

コンソールで下記のエラーが出ます。

Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

環境

"react": "^16.8.6",

Answer 1

checkedでstateを参照するのがダメなようで、checkedを削除するとうまくいきました。

Answer 2

inputのvalueには、checkedかどうかがtrue/falseで入ってくる場所になります。
なので、valueではなくnameを使うべきです。

  const handleVisibillityChange = React.useCallback((e) => {
    e.persist();

    const newState = {};
    newState[e.target.name] = true; //nameに変更
    setVisibillities((prevState) => ({ ...prevState, ...newState }));
  }, []);

  const Visibillities = Object.keys(array).map((k, i) => (
    <label key={k}>
      <input
        type="checkbox"
        name={k} //nameに変更
        checked={visibillities[k]}
        onChange={handleVisibillityChange}
      />
      <span>{k}</span>
    </label>
  ));

Comments

[akarin]

nameに変更してみましたが結果は同じエラーが出ました。

Answer 3

inputのvalueがnullやundefinedになるとそのエラーが発生するようなので常に値が入るように修正すれば大丈夫だと思います

ちなみにtype="checkbox"の時はcheckedだけでvalueは不要だと思います

Comments

[akarin]

value={k||""}としてみましたが状態は変わりませんでした。
valueとハンドラーを削除もしましたがチェックが付けられなくなりました。