我无法在循环中删除特定的卡组件

Question

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">Spaghetti</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卡组件离开屏幕，目标是只让一个组件离开屏幕。我非常感谢能够解决此问题的各种形式的帮助。

Answer 1

问题似乎是由于有条件地表示

state

或

(showBreakfastBox, showLunchBox, showDinnerBox)

组件的

MealBox

变量

AddFood

的处理方式造成的。目前，单击“取消”按钮会切换所有

MealBox

组件的状态变量并隐藏所有组件。

要单独管理每个 MealBox，您必须单独管理其可见性。实现此目的的一种方法是创建一个包含每个 MealBox 的可见性状态的

array of objects

。

const [mealBoxVisibility, setMealBoxVisibility] = useState([
  { mealTime: 'Breakfast', show: true },
  { mealTime: 'Lunch', show: true },
  { mealTime: 'Dinner', show: true },
]);

// Function to toggle the visibility of a specific meal box
const toggleMealBox = (mealTime) => {
  setMealBoxVisibility((prevVisibility) =>
    prevVisibility.map((box) =>
      box.mealTime === mealTime ? { ...box, show: !box.show } : box
    )
  );
};

// Inside the mapping function:
{mealBoxVisibility.map((box) => {
  const { mealTime, show } = box;
  return show ? (
    <MealBox
      key={mealTime}
      mealTime={mealTime}
      setShowBox={() => toggleMealBox(mealTime)}
    />
  ) : (
    <AddFood
      key={mealTime}
      mealTime={mealTime}
      setShowBox={() => toggleMealBox(mealTime)}
    />
  );
})}