Chakra UI模态组件不能与数组对象一起工作

Question

我有一个对象数组，通过它返回chakra的模态组件，但似乎只返回数组中的第一个子元素。它会显示修正后的模态，但只显示数组中的第一项。

import {
Box,
Button,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
useDisclosure
} from "@chakra-ui/react";
const courses = [
{
courseTitle: "London",
courseContent:
"Lodon Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore deleniti assumenda quas minus, fugiat veniam necessitatibus laborum qui similique dolor!"
},
{
courseTitle: "Geography",
courseContent:
"Geography Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore deleniti assumenda quas minus, fugiat veniam necessitatibus laborum qui similique dolor!"
}
];
export default function () {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<Box mt={5} display="flex" gridGap={3}>
{courses.map((course, idx) => (
<Box as="section" key={idx}>
<Button onClick={onOpen} size="sm">
{course.courseTitle}
</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{course.courseTitle}</ModalHeader>
<ModalCloseButton />
<ModalBody>{course.courseContent}</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</Box>
))}
</Box>
);
}

Codesandbox: https://codesandbox.io/s/objective-wave-woiek

Answer 1

检查devtools显示，您的两个模态都是在点击任何一个按钮时打开的，Geography模态在顶部。它可以很容易地通过移动钩子到一个单独的组件来修复。

const IsolatedModal = ({ course }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<Box as="section">
<Button onClick={onOpen} size="sm">
{course.courseTitle}
</Button>
<Modal isOpen={isOpen} onClose={onClose}>
...
</Modal>
</Box>
);
};

export default function () {
return (
<Box mt={5} display="flex" gridGap={3}>
{courses.map((course, idx) => (
<IsolatedModal key={idx} course={course} />
))}
</Box>
);
}