Chakra UI Grid映射数据布局异常：网格项垂直排列如何解决？

核心问题 #

你把<Grid>容器放在了apps.map循环内部，导致每个GridItem都被单独的Grid包裹，每个Grid只有一个子元素，自然会垂直堆叠，无法形成多列网格。

修正步骤 #

1. 将<Grid>容器移到map循环外部，作为所有GridItem的统一父容器
2. 修复组件定义的语法错误（const ViewApp () => → const ViewApp = () =>）
3. 补充apps和loading的状态获取逻辑（从Redux中取出对应数据）

修正后的代码 #

import { Avatar, Box, Flex, Grid, GridItem, Text, VStack, SkeletonText } from '@chakra-ui/react'
import { useSelector } from "react-redux";

const ViewApp = () => {
  // 从Redux获取apps列表和loading状态，替换为实际的reducer路径
  const { apps, loading } = useSelector(state => state.appReducer);

  return (
    <Grid templateColumns="repeat(3, 1fr)" gap={6}>
      {apps.map((app) => (
        <GridItem key={app.id} w="100%" bg="#f5f5f5" borderRadius='lg'>
          <Box as="button">
            <Flex>
              <Box mt={3} ml={6}>
                <Avatar />
              </Box>
              <Box ml={4}>
                <VStack>
                  <Box>
                    <Text fontSize="sm">
                      <SkeletonText isLoaded={!loading}>
                        {app.product}
                      </SkeletonText>
                    </Text>
                  </Box>
                  <Box>
                    <Text mt={-2} fontSize="lg" fontWeight="bold">
                      <SkeletonText isLoaded={!loading}>
                        {app.displayName}
                      </SkeletonText>
                    </Text>
                    <Text fontSize="sm">
                      <SkeletonText isLoaded={!loading}>
                        {app.createdAt}
                      </SkeletonText>
                    </Text>
                  </Box>
                </VStack>
              </Box>
            </Flex>
          </Box>
        </GridItem>
      ))}
    </Grid>
  )
}

export default ViewApp;

额外注意事项 #

• 给每个GridItem添加唯一key属性（优先使用app的唯一ID，而非index），符合React列表渲染规范
• 确保apps数组正确从Redux中获取，替换代码中的appReducer为实际的reducer名称
• 补充了原代码中缺失的Flex和SkeletonText组件导入

内容的提问来源于stack exchange，提问作者user22125377