削除ボタンで食材を削除してもキャンセルボタンで前のダイアログに戻ると削除前の食材がリストに表示されるように変更

frontend/src/pages/DishList.tsx

@@ -33,6 +33,7 @@ import {
 import { ToBuy, Stuff } from '../types/types';
 import { GENERAL_ERRORS } from '../constants/errorMessages';
 import CategoryDropDown from "../components/CategoryDropDown";
+import { Console } from 'console';
 
 const DishList: React.FC = () => {
     const navigate = useNavigate();
@@ -83,6 +84,8 @@ const DishList: React.FC = () => {
     const [allDish, setAllDish] = useState<Dish[]>();
     // 食材リスト
     const [stuff, setStuff] = useState<Stuff[]>([]);
+    // 画面表示用の食材情報配列
+    const [tempStuff, setTempStuff] = useState<Stuff[]>([]);
     // 料理名
     const [selectedDishName, setSelectedDishName] = useState('');
     // 料理情報
@@ -90,8 +93,6 @@ const DishList: React.FC = () => {
         recipeName: '',
         summary: '',
         stuffs: []});
-    // 画面表示用の食材情報配列
-    const [testDishArray, setTestDishArray] = useState<Dish[]>(testdish);
     // エラーメッセージの状態管理
     const [error, setError] = useState(false);
     // 選択した料理の情報を表示するダイアログの表示状態
@@ -115,7 +116,7 @@ const DishList: React.FC = () => {
     const changeDialog = () => {
         setOpenDialog(false);
         setOpenChangeDialog(true);
-        setTestDishArray(testdish);
+        setTempStuff(stuff);
     };
 
     const cancelChange = () => {
@@ -156,9 +157,12 @@ const DishList: React.FC = () => {
      */
     const handleDeleteStuffTemp = async (stuff_id: number) => {
         try {
-              let stuffCopy = [...stuff]; // 配列をコピー
-              stuffCopy.splice(stuff_id, 1);
-              setStuff(stuff);
+              let tempStuffCopy = [...tempStuff]; // 配列をコピー
+              console.log(stuff_id);
+              console.log(tempStuffCopy);
+              tempStuffCopy = tempStuff.filter(stuff => stuff.stuffId !== stuff_id);
+              console.log(tempStuffCopy);
+              setTempStuff(tempStuffCopy);
               // fetchTasks(); // 削除後のタスク一覧を再取得
             } catch (error) {
               // console.error(`${TASK_ERRORS.DELETE_FAILED}:`, error);
@@ -306,7 +310,7 @@ const DishList: React.FC = () => {
                 <FormGroup>
                     {/* <List> */}
                         {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */}
-                        {stuff.map((stuff, stuffId) => (
+                        {tempStuff.map((tempStuff, stuffId) => (
                             <ListItem
                                 key={stuffId}
                                 sx={{
@@ -323,14 +327,14 @@ const DishList: React.FC = () => {
                                 /> */}
                                 {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
                                 <ListItemText
-                                    primary={stuff.stuffName}
+                                    primary={tempStuff.stuffName}
                                     // secondary={task.description}
                                     sx={{width: '80%'}}
                                 />
                                 {/* 食材の個数を表示 */}
                                 <ListItemText
                                     primary={<Typography style={{textAlign:"center"}}>個数<br />
-                                    {stuff.amount}
+                                    {tempStuff.amount}
                                     </Typography>
                                     }
                                     // secondary={task.description}
@@ -342,7 +346,7 @@ const DishList: React.FC = () => {
                                     <IconButton
                                         edge="end"
                                         aria-label="個数を編集"
-                                        onClick={() => changeSelectedItemAmount(stuff, stuff.stuffName, stuff.amount)}
+                                        onClick={() => changeSelectedItemAmount(tempStuff, tempStuff.stuffName, tempStuff.amount)}
                                     >
                                         <ShoppingBasketIcon />
                                     </IconButton>
@@ -365,7 +369,7 @@ const DishList: React.FC = () => {
                                     <IconButton
                                         edge="end"
                                         aria-label="delete"
-                                        onClick={() => handleDeleteStuffTemp(stuffId)}
+                                        onClick={() => handleDeleteStuffTemp(tempStuff.stuffId)}
                                     >
                                         <DeleteIcon />
                                     </IconButton>