【async await】delete後の再表示で削除したデータが表示される

はじめに

削除機能を実装中に再表示で削除したデータが表示される事象に詰まってしまったため、備忘録として記事にします。

問題

削除ボタン押下後もデータが表示されたまま、リロードをすると消える状態

DBでは該当データが消えることを確認

この時のコード

App.jsx

const [records, setRecords] = useState([]);
// 削除ボタン押下
const onClickDelete = (id) => {
    deleteData(id);
    // 削除後のデータを全件取得する
    const datas =  getAllDatas();
    datas.then((data) => {setRecords(data)});
};

deleteData(id);の処理が完了する前に、const datas = getAllDatas();の処理が走っていたことが原因でした。

supabaseFunctions.js

import { supabase } from "./spabase"

export const getAllDatas = async() => {
  const datas = await supabase.from("study-record").select("*"); 
  return datas.data;
};

export const deleteData = async(props) => {
  const response = await supabase.from("study-record").delete().eq('id', props)
};

解決方法

async awaitを使う

参考記事より引用

async とは?
async を関数の前に付けることで、その関数は非同期であることを示します。
関数（プログラムのまとまり）の前に async を付けると、「この関数の中には、終わるのを待たなければいけない作業があるかも」とプログラムに教えることができます。

await とは?
await を使うと、「この作業が終わるのを待つよ」という指示が出せます。await は必ず async 関数の中で使用する必要があります。

reactApp.jsx

  const [records, setRecords] = useState([]);
  const getDatas =  async() => {
    const datas = await getAllDatas();
    setRecords(datas);
  }
  // 削除ボタン押下
  const onClickDelete = async (id) => {
    await deleteData(id);
    getDatas();
  };

1. deleteData(id);にawaitを適用して完全にデータ削除処理が終わるのを待ってもらってから、getAllDatas();を呼ぶように修正
2. getAllDatas();もawaitを適用、完全にデータを取得する処理が終わるのを待ってから、useStateでsetするように修正

おわりに

講師の方に質問したところ爆速で解決しました。
身近に有識者がいるのは本当にありがたい。

参考

カレーの例えが非常にわかりやすかったです。