javascript - 如何使用 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;

标签： javascriptreactjsapinext.jschakra-ui

Answer 1

看起来您正在组件stores内部进行映射VStack，这导致stores垂直显示。如果您将SimpleGrid组件移到map函数之外，它应该会给您想要的结果。