8月7日
詳細画面のReact表示も試行錯誤の末、成功。これも非常に手こずる。DRFからのjsonがネストになっており、それをどう表示するかが問題になっていた。ネスト部分のみ別の変数に入れ、それをmapで取り出すという形で治める。これが正しいやり方なのかどうかわからない。現在自分が知ってるスキルでできるのがコレということだ。ただそのmapも一苦労。結局これは初期値に表示データと同様の項目を変数でまとめて入れてやったら表示された。表示させることだけで2週間位かかったんじゃないか？壁を突破したらまた壁が現れて、コツコツ砕きながら突破して、また立ち塞がって。ああでもないこうでもないという試行錯誤の回数だけ経験値は増す。知識が血肉になる。その手応えだけは感じている。今度はAPIを叩いてCRUD実装なんだろうが、ちょっと疲れたので、毛色を変えてBootstrapで装飾編に移行したいと思う。
ともあれ現在までの知見をまとめておきたい。
- useStateの初期値って大切なんだなと。ただの配列じゃダメだった。表示させたい項目を空
""でいいから、設定してやること。ネスト項目部分は空配列[]を設定すること。配列内部は項目を設定しなくても大丈夫だった。 - mapは初期値を設定すれば
cannot read properties of undefined (reading 'map')は見なくて済む。この表示を何度目にしてどんだけ苦労したことか…。 - map内の関数はreturnを明記したほうが良い。なかったらなぜか上手くcompileできなかった。これオレ環？
- react-bootstrapをインストールしてApp.jsに
import 'bootstrap/dist/css/bootstrap.min.css';追加。<link...をどこに追加するかわからず。別ファイルでボタンだけ作成しimportしてみたが、compileは上手く行っても、すべて表示されず真っ白。原因不明。App.js内にButtonが入ってる関数を記入、return内に含めると成功。その違いがよくわからん。別ファイルにReactコンポーネント作成し、それをimportしたボタンは上手く表示される。これもなぜだ？が、成功する方法はわかったので良しとしよう。
ある程度Bootstrapで飾り付けできたら、API叩いてCRUD実装したい。Django+Bootstrapのみならここまで苦労しなかったはず。React使ってみたかったからこそ、DRF経由し、非常に回り道をしている。何のためにこんなことしてんだろう、機能的にはDjangoのみですでに足りてるのにと悪魔の囁きもあったのだが、知見が深まり非常に勉強になっていることは否めないので、最後までゴールできたら、自分を褒めてやりたい。
