Javascript 在接收到所有数据后，如何开始通过json循环以不破坏swiper大小？

我正在使用Swiper React创建幻灯片。我循环使用json数据来创建滑块元素。我想因为我异步拉取数据，它会弄乱滑块的大小。即使将SlideService设置为5，我也只能显示一个幻灯片元素。当我在桌面上调整窗口大小或在手机上从纵向切换到横向时，它会修复。我如何解决这个问题？可能在收到所有数据后启动Object.map，但我无法使用axios或fetch执行此操作。这是我的密码

import React, { useState, useEffect } from "react";
import { Container, Box, Typography } from "@material-ui/core";
import Story from "./Story";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.min.css";
import SwiperCore, { Autoplay } from "swiper";
import axios from "axios";

SwiperCore.use([Autoplay]);

const Fragmanlar = () => {
  const [trailer, setTrailer] = useState([]);

  useEffect(() => {
    const url = "URLHERE";
    const fetchItems = async () => {
      const result = await axios(url);

      const res = result.data;
      setTrailer(res);
    };

    fetchItems();
  }, []);

  return (
    <div>
      <Container maxWidth='lg'>
        <Swiper
          spaceBetween={0}
          slidesPerView={5}
          wrapperTag='ul'
          autoplay={true}
        >
          {trailer.map((item) => (
            <SwiperSlide tag='li' key={item.id}>
              <Story poster={item.poster} />
            </SwiperSlide>
          ))}
        </Swiper>
      </Container>
    </div>
  );
};

export default Fragmanlar;

import React，{useState，useffect}来自“React”；
从“@material ui/core”导入{容器、框、排版}；
从“/Story”导入故事；
从“Swiper/react”导入{Swiper，SwiperSlide}；
导入“swiper/swiper bundle.min.css”；
从“swiper”导入SwiperCore，{Autoplay}；
从“axios”导入axios；
使用（[Autoplay]）；
常数Fragmanlar=（）=>{
const[traile，settraile]=useState（[]）；
useffect（（）=>{
const url=“URLHERE”；
const fetchItems=async（）=>{
常量结果=等待axios（url）；
const res=结果数据；
设置拖车（res）；
};
fetchItems（）；
}, []);
返回(
{trailer.map（（项目）=>(
))}
);
};
导出默认Fragmanlar；

只有在您有物品后才显示刷卡器如何<代码>{Boolean（trailer.length）&&……}它成功了！非常感谢。