追加したタスクを画面に反映させるために毎回データベースの情報を取得している

[ytanaka44]

背景

• formikで送信する際にfetchTodosでデータベースから情報を取ってきている
• setTodosでサーバーとの通信をせずに画面を更新する

AddTodo.tsxの一部

onSubmit: async (state) => {
  const todo = {
    ...state,
    createdAt: format(new Date(), "yyyy-MM-dd HH:mm:ss"),
  };
  await addTodo(todo);
  await props.fetchTodos();
    },

[ytanaka44]

対応内容

fetchTodosを使用せずにtodosにtodoを追加することで対応した。このようにすることで画面の更新のためにデータベースへの問い合わせを行う必要がなくなる。

props.setTodos([...props.todos, todo]);