[Golang/React]~MovieApp5: Form処理2(取得/保存/更新)を実装しよう!~

こんにちは、KOUKIです。

GolangとReactでMovie Appの開発をしています。

前回に引き続き、Movie Formの処理を実装します。

尚、Udemyの「Working with React and Go (Golang)」を参考にしているので、よかったら受講してみてください。

前回

Movieデータの保存や更新を行うMovie Formの実装を行いました

事前準備

フォルダ/ファイル

Alert機能

Formからデータの登録や更新を行なった後の結果をAlertで表示できるようにします。

Alertコンポーネント

BootStrapのAlert機能を使って、Alertコンポーネントを実装します。

Alertの設定

EditMovieコンポーネントからAlertの設定を行いましょう。

まずは、Alertの型を定義します。

型の定義は、Golang感覚で実装してますね。GolangとTypeScriptは似てます。

次に、useStateでAlertを管理します。

Requestの修正

Alertを設定できる様にRequestを修正します。

Alertコンポーネントの設置

先ほど実装したAlertコンポーネントを設置しましょう。

動作確認

docker-compose upでコンテナを立ち上げ、ブラウザから「http://localhost:3000/admin/movie/0」のFormへアクセスします。

Formの項目を適当に埋め、「Save」ボタンを押下してください。

OKですね。エラー表示については、後ほどお見せします。

編集機能

Movieデータの編集機能を実装しましょう。

UpdateMovie

Golang側で、Update処理を実装します。

実は、クエリにバグ(into)があるのですが、エラー表示時の画面確認に使いますので後ほど修正します。

ハンドラーの修正

ハンドラーにUpdate用の処理を追加します。

不具合1: Movieデータが編集できない

今頃気がついたのですが、編集画面に入力されるデータを編集することができません。

Reactでは、input要素などのvalue属性はStateを通さないと編集できないようです。

setXXXX」にてStateを設定し、value属性にその値を指定しました。これで、編集できるようになります。

不具合2: 400エラーの修正

修正画面で、「Save」ボタンを押下すると400エラーになります。

エラーメッセージには、以下の内容が表示されていました。

runtimeの型に誤りがあるようなので、修正しましょう。

runtimeに加えてratingもintタイプなので、合わせて修正しました。

また、Formに手入力した値を取得するとstring型になるので、それも修正します。

修正3:SQL(クエリ)の修正

「pq: syntax error at or near “into”」エラーが出たので、修正します。

動作検証

ようやく動作検証ができます。

次回

次回は、FormからMovieデータを削除する処理を実装します

記事まとめ

参考書籍

ソースコード

movie-handlers.go

movies-db.go

ui-components.ts

EditMovie.tsx

Alert.tsx

コメントを残す