Array Map 方法无法在 React 中正确呈现

Question

我正在使用 ChakraUI 和 React 制作一个项目，我想在其中以卡片的形式显示成员列表。但由于某种原因，该组件无法正确呈现。浏览器中仅显示团队成员文本。但是我映射 listOfTeamMembers 数组的部分没有渲染。背后的原因是什么？

会员组件

import { Box, Text, Center, Stack } from "@chakra-ui/layout";
import listOfTeamMembers from "./team-members-list";

function TeamMembers() {
  return (
    <Box id='team-members' mt={10}>
      <Box>
        <Center>
          <Text fontSize='4xl' as='u' fontFamily='sans-serif'>
            Team Members   //only this part is showing on website
          </Text>
        </Center>
        <Box>
          {listOfTeamMembers.map((items) => {
            <Stack
              spacing={{ base: "18px", md: "25px", lg: "40px" }}
              direction='row'
            >
              <Box
                w={{ base: "300px", md: "200px", lg: "100px" }}
                h={{ base: "300px", md: "200px", lg: "100px" }}
                borderRadius={5}
              >
                {items.name}
                {items.contact}
                {items.details}
              </Box>
            </Stack>;
          })}
        </Box>
      </Box>
    </Box>
  );
}

export default TeamMembers;

成员数组

const listOfTeamMembers = [
  {
    name: "Dr. DoofenShmirtz",
    contact: "#",
    details:
      "The evil genius and a loving father of one daughter. Hate Perry the platipus",
  },
  {
    name: "Dr. Frankestein",
    contact: "#",
    details: "I experiment on Dead People",
  },
  {
    name: "Dr. Drake Ramoray",
    contact: "#",
    details: "Has magical hands. Can do brain Transplant without any Help",
  },
  {
    name: "Dr. House MD",
    contact: "#",
    details: "I am a fictional Character. What am I doing here!",
  },
  {
    name: "Dr. Hibbert",
    contact: "#",
    details: "ohhohohohohohoho",
  },
  {
    name: "Dr. Elmer Hartman",
    contact: "#",
    details: "My role as a doctor is to cure people. But I do the opposite.",
  },
];

export default listOfTeamMembers;

我的App.js组件

import { ChakraProvider } from "@chakra-ui/provider";
import { useState } from "react";
import Navbar from "../src/components/navbar";
import Home from "./components/Home";
import theme from "./theme";
import TeamMembers from "../src/components/Team Members/team-members";

function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  return (
    <ChakraProvider theme={theme}>
      <Navbar isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
      <Home isMenuOpen={isMenuOpen} />
      <TeamMembers />
    </ChakraProvider>
  );
}

export default App;

Answer 1

你还必须 return array item :-)

{listOfTeamMembers.map((items) => {
            return (
              <Stack
                spacing={{ base: "18px", md: "25px", lg: "40px" }}
                direction="row"
              >
                <Box
                  w={{ base: "300px", md: "200px", lg: "100px" }}
                  h={{ base: "300px", md: "200px", lg: "100px" }}
                  borderRadius={5}
                >
                  {items.name}
                  {items.contact}
                  {items.details}
                </Box>
              </Stack>
            );
          })}

这是演示：https://codesandbox.io/s/sharp-ganguly-lcj38?file=/src/App.js:1122-1694

Array Map 方法无法在 React 中正确呈现

Array Map method not rendering properly in React

javascript

reactjs

chakra-ui