依存で再取得
条件が変わったら取り直す
fleama にはカテゴリの絞り込みがあります。靴を選んだら靴だけ、食器を選んだら食器だけが並んでほしい。
絞り込みは、取ってきた配列を filter する方法でもできます。ただし商品が何万件もあると、全部取ってきてから捨てることになり、通信も画面も重くなります。絞り込みはサーバーにやってもらうのが普通です。
仕様書の filters がそのためにあります。
"filters": [{ "param": "category", "field": "category" }]/api/items?category=shoes と呼べば、shoes のものだけが返ります。値が空なら絞り込みは効かず、全部返ります。
依存配列に入れる
問題は、いつ取り直すかです。
useEffect(() => {
async function load() {
const res = await fetch("/api/items?category=" + category);
const data: Item[] = await res.json();
setItems(data);
}
load();
}, [category]);依存配列を [category] にしました。これで category が前と違う値になったときだけ、もう一度動くようになります。選び直すたびに取り直し、それ以外では動きません。
依存配列は「監視する値の一覧」です。空の [] なら監視するものが無いので初回だけ、[category] なら category が変わるたび、書かなければ毎回です。
中で使う値は全部入れる
うっかりやりがちなのが、URL には category を入れたのに依存配列は [] のまま、という書き方です。カテゴリを選んでも画面が変わらず、原因を探して長い時間を溶かします。
覚え方は1つです。effect の中で使った外の値は、全部依存配列に書く。これを守っていれば、取り直しの抜けは起きません。
演習
カテゴリの選択を依存配列に入れて、選び直すたびに取り直します。