如何使用 Chakra-UI 将 API 信息分类到网格中

Question

我正在尝试使用 Chakra-UI 将从 API 接收到的数据分类到网格中，但它根本不起作用，我是 Chakra-UI 的新手，所以这个对大多数人来说可能看起来超级简单，但我无法弄清楚。如何将它们分类为 4 列或更多列的网格？而不是坚持 1 并沿着页面向下流动？

我尝试了几种不同的方法，但 none 对我有用，这就是我这次所做的，我想我会问，我在下面留下了我的代码来展示什么我目前有一个屏幕截图来显示正在发生的事情。

import axios from "axios";
import { chakra, Box, Image, Flex, Icon, useColorModeValue, HStack, VStack, Grid, Wrap, WrapItem, Container, Heading, Text, SimpleGrid } from "@chakra-ui/react";
import { MdHeadset, MdEmail, MdLocationOn } from "react-icons/md";
import { BsFillBriefcaseFill } from "react-icons/bs";

const Stores = ({stores}) => { if(!stores){ return <div>Loading...</div> }
    console.log(stores);
    return (
        <>
            {stores.map((store) => (
            <SimpleGrid columns={4} spacing={10} pl={6}>
                <Box height="400px">
                    <Text>{store.name}</Text>
                    <Image src={store.imageUrl} />
                    <Heading>{store.vBucks}</Heading>
                </Box>
            </SimpleGrid>
            ))}
        </>
    )
}

Stores.getInitialProps = async (ctx) => {
    try {
      const res = await axios.get("https://api.fortnitetracker.com/v1/store", { 
        headers: {
          'TRN-Api-Key' : 'XXX',
          'Access-Control-Allow-Origin' : true,
        }
      });
      const stores = res.data;
      console.log(stores)
      return { stores };
    } catch (error) {
      return { error };
    }
  };
  

  export default Stores;

Answer 1

您似乎在 VStack 组件内部映射 stores，这导致 stores 垂直显示。如果您将 SimpleGrid 组件移到 map 函数之外，它应该会为您提供所需的结果。

如何使用 Chakra-UI 将 API 信息分类到网格中

How to sort API information into a grid using Chakra-UI

javascript

reactjs

api

next.js

chakra-ui