如何使用Chakra-UI将API信息排序到网格中

Question

我试图使用Chakra-UI将从API接收的数据排序到网格中，但它根本不起作用。我是Chakra-UI的新手，所以对大多数人来说，这可能看起来非常简单，但我无法弄清楚。如何将这些数据排序到包含4列或更多列的网格中？而不是坚持到1，然后顺着页面往下流？

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

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函数之外，应该会得到所需的结果。