From 8a28c0ca405d22062e4235fee9d72f6d8ab81ba3 Mon Sep 17 00:00:00 2001
From: "masato.fujita" <masato.fujita@ivis.co.jp>
Date: Thu, 12 Jun 2025 15:46:31 +0900
Subject: [PATCH] =?UTF-8?q?=E5=89=8A=E9=99=A4=E3=83=9C=E3=82=BF=E3=83=B3?=
 =?UTF-8?q?=E3=81=A7=E9=A3=9F=E6=9D=90=E3=82=92=E5=89=8A=E9=99=A4=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=E3=82=82=E3=82=AD=E3=83=A3=E3=83=B3=E3=82=BB=E3=83=AB?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=A7=E5=89=8D=E3=81=AE=E3=83=80?=
 =?UTF-8?q?=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0=E3=81=AB=E6=88=BB=E3=82=8B?=
 =?UTF-8?q?=E3=81=A8=E5=89=8A=E9=99=A4=E5=89=8D=E3=81=AE=E9=A3=9F=E6=9D=90?=
 =?UTF-8?q?=E3=81=8C=E3=83=AA=E3=82=B9=E3=83=88=E3=81=AB=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E3=81=95=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/DishList.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/DishList.tsx b/frontend/src/pages/DishList.tsx
index 5eef344..d882add 100644
--- a/frontend/src/pages/DishList.tsx
+++ b/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>