浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【javascript】チェックボックスの間違った管理について

チェックボックスで任意のtrue/falseを選択後別ページに移動する処理を書いていて、次ページで

チェックボックスの選択ページに戻る処理が欲しくなったので戻る処理を追加した。

処理追加後にチェックボックスを選択するページに戻ると、チェックボックスが最後にチェックした時の状態

(trueがつきっぱなし)になっていた。

怪しいと思ったのがobject.assign(値が変わったデータのみ更新)

addOption(checkedNum){
    this.setState(prevState => ({
      otherOptions: prevState.otherOptions.map(
        obj => (obj.id === checkedNum ? Object.assign(obj, { value: !obj.value }) : obj)
      )
    }));
  }

だがしかし、処理直前のチェックボックスのデータを見てみると全て初期状態のままだった。

いざ仕切り直し。そして解決へ。

原因はチェックボックスの内容を含んだオブジェクトを外に設定、つまりグローバル変数として

扱っていたためだった。

const option = [
      {id: 1, key:"coffee", value: false, menu: "コーヒー"},
      {id: 2, key:"bread", value: false, menu: "パン"},
      {id: 3, key:"tea", value: false, menu: "紅茶"},
    ];
getReceiveOption() {
  return option;
  }

グローバルは一回更新するとその結果が残り続けるのでどこのページから遷移しても

履歴が残るという顛末だった。

正しい書き方は以下の通り。ローカルにしてオブジェクトを管理すべし。

getReceiveOption() {
    const option = [
      {id: 1, key:"candy", value: false, menu: "乳幼児のパックを希望する"},
      {id: 2, key:"infants", value: false, menu: "お菓子のパックを希望する"},
      {id: 3, key:"fresh", value: false, menu: "生鮮食品のパックを希望する"},
    ];
  
    return option;
  }
  • この記事いいね! (0)