陣列映射方法無法在React中正確呈現

我正在使用 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;

uj5u.com熱心網友回復：

你也必須回來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

標籤：javascript 反应 脉轮

上一篇：打字稿中泛型型別的嚴格打字問題

下一篇：將JSON字串轉換為JS代碼片段