はじめに
簡単な学習記録アプリを作成しています。
登録した学習記録に削除ボタンを付与し、ボタンを押すとその記録が見た目からも、Supabaseのテーブル上のデータも削除されるような実装をしたいです。
しかし、以下の問題に直面したため問題点と解決策をまとめます。
問題
- Supabaseに登録したデータが削除できない
- 削除ボタンを押した際のコンソールを確認すると、該当の要素よりひとつ前の要素が表示される
- 削除したいものの
idとSupabaseのテーブルのidが一致せずデータが削除されない
修正前のコード
SupabaseFuction.js
export const deleteRecords = async (id) => {
const records = await supabase.from("study-record").delete().match(id);
return records.data;
};
App.js
const onClickDelete = async (id) => {
const newRecords = [...records];
newRecords.splice(id, 1);
setRecords(newRecords);
deleteRecords(id);
};
return (
<>
<button onClick={() => onClickDelete(id)}>削除</button>
</>
);
解決方法
- そもそもSupabaseで作成したテーブルの
idがuuidになっていなかった -
recordの中にあるidがonClickDeleteに渡せていなかった
修正前のコード
SupabaseFuction.js
export const deleteRecords = async (id) => {
const records = await supabase.from("study-record").delete().match({ id });
return records.data;
};
App.js
const onClickDelete = async (id) => {
const newRecords = [...records];
newRecords.splice(id, 1);
setRecords(newRecords);
deleteRecords(id);
};
return (
<>
<button onClick={() => onClickDelete(record.id)}>削除</button>
</>
);
おわりに
idを渡したいことばかりに気を取られてidがどこにあるのかが抜けていました…。
今回はonClickDeleteにconsole.log(record.id);を試すことで解決に辿り着くことができました。
どこの何の値を渡したいのか、どこでつまづいているかをデバッグで調べていくことが重要だと気付かされました。