タスクに付与されたIDを直接URLで検索するとエラーになる

[ytanaka44]

背景

下図のようにタスクをクリックするとURL付きのダイアログが表示される。

このURLを直接検索すると下記エラーが発生

Cannot read properties of undefined (reading 'id')
TypeError: Cannot read properties of undefined (reading 'id')

原因

TodoEditコンポーネントで下記のようにTodoStateを無理やり当てはめているため、undefinedの可能性を考慮できていない

const todo = props.todos.find((todo) => todo.id === id) as TodoState;

[ytanaka44]

• URLに直接アクセスした際に必要なコンテキストや状態が存在しない
• URLに直接アクセスした場合でも、必要なデータを取得または生成し、適切な状態でモーダルが表示されるようにする

[ytanaka44]

変更点

• locationからidを取るのではなく、useParamsからidを取得する方法に変更
• props.todosから対象のidのtodoを取り出すのではなく、urlのidに一致するtodoをデータベースから取得する方法に変更
• todoがundefinedになるため、if文でtodoの所在を確認
• useFormikで初期値を更新できるようにenableReinitialize: trueを設定（参考）

const { id } = useParams<string>();
useEffect(() => {
  if (id) {
    setIsLoading(true);
    setError(null);
    const fetchTodo = async () => {
      try {
        const fetchedTodo = await getTodoById(id);
        setTodo(fetchedTodo);
      } catch (err: any) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };
    fetchTodo();
  }
}, [id]);