Reactでボタンを2回押さないと処理が実行されないので、1回押すだけで処理を実行できるようにしたい

Question

実現したいこと

-完了ボタンを2回押さないと処理が実行されないので、1回押すだけで処理が実行できるようにしたい

前提

React✖️TypeScriptでTodoListを実装しています。
フォームに文字を入力し追加を押すとTodoListが生成されます。
生成されたTodoListには、完了ボタンと削除ボタンがあり、
「完了ボタンを押したら完了したタスクというモーダルにタスクが移動し、削除ボタンを押したときは、モーダルで本当に削除するか確認し、「はい」なら削除、「いいえ」ならそのままTodoListに残す」
というものです。
現在、削除ボタンを押した際の処理は正常に動作しているのですが、完了ボタンは2回押さないと処理が実行されない状況です。
非同期処理やらuseEffect()など試したのですが、完了ボタンの動作が正常になると削除ボタンを押したときも完了したタスクに移動してしまう。。。など手詰まりになってしまったので、ご教授お願いします。

発生している問題・エラーメッセージ

完了ボタンを2回押さないと処理が実行されない

該当のソースコード

ソースコード
//追加されたタスクを表示するコンポーネント
import React, { useState, memo } from "react";
import { Delete } from "./todoDelete";
import { Button } from "../ui/button";

// ListItem の型定義
type ListItem = {
    id: string;
    text: string;
    date?: Date;
};
// Props の型定義
type ListProps = {
    list: ListItem[];
    setList: React.Dispatch<React.SetStateAction<ListItem[]>>;
    //タスク完了時のコールバック関数
    handleTaskComplete: (completedTask: ListItem, date: Date) => void;
};

export const List = memo((props: ListProps) => {
    //削除ボタンの状態
    const [showDelete, setShowDelete] = useState<boolean>(false);
    //選択されているタスクのIDを保持する
    const [selectedTask, setSelectedTask] = useState<string | null>(null);
    //完了したタスクを管理するState
    const [completedTasks, setCompletedTasks] = useState<ListItem[]>([]);

    //削除ボタンの初期値
    const openDelete = () => {
        setShowDelete(true);
    };
    //ボタン押下時の対応するIDの保存
    const saveTask = (id: string | null) => {
        setSelectedTask(id);
    };
    //削除するタスクを元のリストから削除
    const handleDelete = () => {
        props.setList(props.list.filter((task) => task.id !== selectedTask));
    };

    //完了ボタンが押された時の処理
    const handleClear = () => {
        console.log("handleClear called");
        //対象のタスクの選定
        const completedTask = props.list.find((task) => task.id === selectedTask);
        if (completedTask) {
            // 完了したタスクを元のリストから削除
            props.setList((prevList) => prevList.filter((task) => task.id !== selectedTask));
            //現在の日時を取得
            const date = new Date();
            //完了したタスクに完了日時を追加
            completedTask.date = date;
            //handleTaskCompleteにタスクを渡して通知
            console.log("props.list:", props.list);
            props.handleTaskComplete(completedTask, date);
            // 完了したタスクを完了リストに追加
            console.log("Adding completedTask to completedTasks");
            setCompletedTasks((prevCompletedTasks) => {
                return [...prevCompletedTasks, completedTask];
            });
        };
    };


    return (
        <>
            <div className="mt-6 flex flex-col items-center list-none">
                {props.list.map((task) => (
                    <div className="table w-4/12 h-12">
                        <li className="bg-[#ffffff] border-solid border border-[#9a49f2] p-4 table-cell align-middle rounded"
                            key={task.id}>
                            <div className="flex items-center">
                                <p className="mr-auto text-[#9a49f2]/75 font-bold">{task.text}</p>
                                <div>
                                    <Button variant="outline" size="sm"
                                        onClick={() => {
                                            saveTask(task.id);
                                            handleClear();
                                        }}
                                        className="text-[#f0eef7] bg-pink-600 font-bold rounded-full">完了</Button>
                                    <Button variant="outline" size="sm"
                                        onClick={() => {
                                            // 先に記述した方が処理される
                                            openDelete();
                                            saveTask(task.id);
                                        }}
                                        className="text-[#f0eef7] bg-indigo-600 font-bold rounded-full">削除</Button>
                                </div>
                            </div>
                        </li>
                    </div>
                ))}
                {/* 削除タスクの受け渡し */}
                <Delete showDelete={showDelete} setShowDelete={setShowDelete} handleDelete={handleDelete} />
            </div>
        </>
    );
});

export default List;

試したこと

aysnc,awaitでの非同期処理
useEffect()での制御

補足情報（FW/ツールのバージョンなど）

vscode
docker

Comments

[maisumakun]

Buttonはどのようなコンポーネントですか？

Answer 1

完了ボタンを押したときに 「saveTask の実行 → handleClear() の実行」という処理の流れになっていますが、このような実装方法だと、

idが id_001 のタスクの完了ボタンを押したあと、次に id_002 のタスクの完了ボタンを押したときの挙動は、このようになります。

saveTask の中で setSelectedTask("id_002") が実行される。
その次、handleClear に進むが、その中で selectedTask の値は "id_001" のまま。

原因はこちらの記事をご参照ください。https://qiita.com/honey32/items/ee8d1577e68b0d58678d

今回については、 selectedTask というステートに、一時変数でよいものをわざわざワンバウンドさせる 必要がありません。

saveTask(task.id);
handleClear();

ではなく

handleClear(task.id)

として、handleClear の中では、受け取った taskId を使って処理を進めればバグが治ると思います。