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

Question

目前我正在使用react-slick slider在我的网站和Strapi中有一个carousel组件作为我的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/recursion -solomon-c20on?file=/src/Slide。tsx这里我在post数组中放入了虚拟数据但实际上它来自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 },
};
}