此问题在此处已有答案：

I am unable to remove a specific card component in a loop（1个答案）
2天前关闭

const MealBox = ({ mealTime, setShowBox }: { mealTime: string; setShowBox: any }) => {
    const [meal, setMeal] = useState("Jollof rice")
    
    // console.log('meal', meal)
    
    return (
        <Box border={'1px solid #f0eeeb'} rounded={'lg'} p="10px">
            <Flex
                alignItems={'center'}
                gap={'25px'}
                w={'270px'}
                justifyContent={'space-between'}
            >
                <Box w='full'>
                    <Flex justify={'space-between'}>
                        <Text fontWeight={'semibold'}>{mealTime}</Text>
                        <MdOutlineRefresh size={24} />
                    </Flex>
                    <Select onChange={(e) => setMeal(e.target.value)} value={meal}>
                        <option value="Jollof rice">Jollof Rice</option>
                        <option value="Spaghetti">Spaghet

ti</option>
                </Select>
            </Box>
        </Flex>

        <Box bg={'#f8f8f7'} p="10px" mt="15px" rounded={'lg'}>
            <Flex alignItems={'center'} justifyContent={'space-between'}>
                <Text fontWeight={'semibold'}>{meal}</Text>
                <Box onClick={() => setShowBox(false)} cursor={'pointer'}>
                    <LiaTimesSolid />
                </Box>
            </Flex>
            <Text>Chicken Republic - Gbagada</Text>
            <Text fontWeight={'medium'}>NGN 2,500</Text>
            <Flex alignItems={'center'} gap={'15px'} mt={'10px'}>
                <Text>Sides:</Text>
                <Select>
                    <option value="Youghurt">Youghurt</option>
                    <option value="Orange juice">Orange juice</option>
                </Select>
            </Flex>
            <Flex alignItems={'center'} gap={'15px'} mt={'10px'}>
                <Text>Extras:</Text>
                <Select>
                    <option value="Youghurt">Plantain</option>
                    <option value="Orange juice">Coleslaw</option>
                </Select>
            </Flex>
        </Box>
    </Box>
);

上面的代码是一个卡片组件，它有一个取消图标，单击该图标将删除卡片。

const [showBreakfastBox, setShowBreakfastBox] = useState(true);
const [showLunchBox, setShowLunchBox] = useState(true);
const [showDinnerBox, setShowDinnerBox] = useState(true);

型
这些usestate变量用于有条件地呈现是显示mealbox组件还是显示addfood组件-

{Array(7)
            .fill(0)
            .map((item, idx) => {

                const tomorrow = new Date(currentDate)
                tomorrow.setDate(currentDate.getDate() + idx + 1);

                const formattedDate = tomorrow.toLocaleDateString('en-US', { month: 'long', day: 'numeric' });

                const dayOfWeek = tomorrow.toLocaleDateString('en-US', { weekday: 'long' })

                return (
                    <Box
                        key={idx}
                        overflowX={'scroll'}
                        sx={{
                            '::-webkit-scrollbar': {
                                display: 'none',
                            },
                        }}
                        maxW={'1420px'}
                        w={'1420px'}
                        my={'25px'}
                        mx="auto"
                    >
                        <Flex gap={'15px'} width={(10 * 270).toString() + 'px'}>
                            <Box w={'170px'}>
                                <Text>{formattedDate}</Text>
                                <Text fontWeight={'semibold'}>{dayOfWeek}</Text>
                                <Text fontSize={'.875rem'} color='#AA9F93'>1669 Calories</Text>
                                <Box mt='10px'>
                                    <MdOutlineRefresh size={24} />
                                </Box>
                            </Box>

                            {
                                showBreakfastBox
                                    ? <MealBox mealTime={'Breakfast'} setShowBox={setShowBreakfastBox} />
                                    : <AddFood mealTime={'Breakfast'} setShowBox={setShowBreakfastBox} />
                            }
                            {
                                showLunchBox
                                    ? <MealBox mealTime={'Lunch'} setShowBox={setShowLunchBox} />
                                    : <AddFood mealTime={'Lunch'} setShowBox={setShowLunchBox} />
                            }
                            {
                                showDinnerBox
                                    ? <MealBox mealTime={'Dinner'} setShowBox={setShowDinnerBox} />
                                    : <AddFood mealTime={'Dinner'} setShowBox={setShowDinnerBox} />
                            }
                            
                            <SnackBox />
                        </Flex>
                    </Box>
                );
            })}

型
在这段代码中，我在屏幕上呈现了mealbox组件，并使用前面声明的usestate变量，通过addfood组件有条件地呈现它，但我现在面临的问题是，每当我单击“取消”按钮时，都会出现此循环。所有的7卡组件都离开屏幕，目标是只让一个组件离开屏幕。2我将感激我能得到的每一种帮助来解决这个问题问题.