使用 .map 将 API 数据加载到 Slick-Slider 组件中

Question

目前，我正在使用 react-slick slider 在我的网站上安装轮播组件，并使用 Strapi 作为我的 CMS。我想通过我正在获取的 CMS API 填写此内容。通常我使用这段代码来填写我的内容：

export default function Page({posts}) {
  return (
    {posts &&
            posts.map((team) => (
               {posts.Title}
      ))}

但是对于我的 <Slider> 我正在使用这段代码并且无法添加我的 .map 函数，因为 class 正在扩展组件：

export default class BlogPost extends Component {
  render() {
    var settings = {
      dots: true,
      infinite: false,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 4,
      initialSlide: 0,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true,
          },
        },
      ],
    };

    return (
      <>
        <div>
          <Slider {...settings}>
            <div>
              <img style={{ width: "90%" }} src="/countries1.png" />
              <div
                style={{
                  minHeight: "100px",
                  padding: "30px",
                  textAlign: "center",
                }}
              >
                <div>
                  Reasons to Acquire Antigua & Barbuda Citizenship by Investment{" "}
                </div>
                <br />

                <div>Read More</div>
              </div>
            </div>
            <div>
              <h3>2</h3>
            </div>
          </Slider>
        </div>
      </>
    );
  }
}

export async function getStaticProps() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  return {
    props: { posts },
  };
}

有什么方法可以在我的 <Slider> 组件中使用 .map 函数来获取图像和标题？

我添加了我的代码的沙箱，codesandbox。io/s/recursing-solomon-c20on?file=/src/Slide.tsx 就在这里我在 posts 数组中放入了虚拟数据，但实际上它来自 getStaticProps API 通话

Answer 1

不确定这是否会按原样使用。但这是总体思路。

const sliderSettings = {
  dots: true,
  infinite: false,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 4,
  initialSlide: 0,
  nextArrow: <SampleNextArrow />,
  prevArrow: <SamplePrevArrow />,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true,
      },
    },
  ],
};
export default class BlogPost extends Component {
constructor(props) {
super(props);
this.state = {posts: []};
  }
  componentDidMount() {
    getStaticProps().then(data => {
      this.setState({
        posts: data.props.posts
      });
    });
  }
  getSlides() {
    return this.state.posts.map((post) => {
      // ... generate divs and imgs here.
    })
  }
  render() {
    const slides = this.getSlides()

    return (
      <>
        <div>
          <Slider {...sliderSettings}>
            {slides}
          </Slider>
        </div>
      </>
    );
  }
}

export async function getStaticProps() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  return {
    props: { posts },
  };
}

使用 .map 将 API 数据加载到 Slick-Slider 组件中

Using .map to load API data into Slick-Slider Component

javascript

reactjs

api

slick.js