时间戳

首页 > 解决方案 > 使用 .map 将 API 数据加载到 Slick-Slider 组件中

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

问题描述

目前我在我的网站和Strapireact-slick slider中使用轮播组件作为我的 CMS。我想通过我正在获取的 CMS API 填写此内容。通常我使用这段代码来填写我的内容：

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

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

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 },
  };
}

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

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

标签： javascriptreactjsapislick.js

解决方案

不确定这是否会按原样使用。但这是一般的想法。

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 },
  };
}

推荐阅读