Chakra UI 模态组件不适用于对象数组

Question

我有一个对象数组，通过它映射 return 脉轮的模态组件，但似乎数组中的第一个子对象只被 returned。它显示更正的模态但仅显示数组中的第一项。

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>
  );
}

Chakra UI 模态组件不适用于对象数组

Chakra UI Modal component does not work with Array of object

reactjs

chakra-ui