2023-11-22
チェックボックスで任意の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;
}