如何在React类组件的Slick-Slider中用map渲染Strapi API返回数据

解决方法 #

类组件和函数组件的props取值方式不同，你只需要通过this.props.posts拿到getStaticProps返回的数据，直接在<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}>
            {/* 替换原有写死的轮播项，改为遍历posts渲染 */}
            {this.props.posts && this.props.posts.map((post) => (
              // 实际场景建议用post唯一标识如id作为key，不要用索引
              <div key={post.id}>
                <img style={{ width: "90%" }} src={post.image} alt={post.title} />
                <div
                  style={{
                    minHeight: "100px",
                    padding: "30px",
                    textAlign: "center",
                  }}
                >
                  <div>{post.title}</div>
                  <br />
                  <div>Read More</div>
                </div>
              </div>
            ))}
          </Slider>
        </div>
      </>
    );
  }
}

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

  return {
    props: { posts },
  };
}

注意事项 #

• 如果Strapi返回的图片字段是相对路径，需要拼接Strapi服务的域名前缀，比如src={http://localhost:1337${post.image.url}}
• 列表遍历必须添加唯一key属性，避免出现渲染异常

内容的提问来源于stack exchange，提问作者Jay Modi