reactjs - slideToShow 未呈现指定数量的列

Question

我正在使用 react-slick 来渲染数组中的元素。我的数组长度是 4，每个数组元素都包含子数组，我在 slideToShow 中指定了 4，在 slideToScroll 中指定了 4。在 4 列中它向我显示 3 列。下面是我的代码。

const settings = {
  arrows: false,
  infinite: true,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 4,  
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4
      }
    },
    {
      breakpoint: 780,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
};

 <Slider {...settings} ref={slider => this.slider = slider}>
      {
        array_groups.map((item, index) =>
        <div key={index}>
          {
            item.map((subItem, subIndex) => 
              <div key={subIndex}>{subItem.title}
              </div>)
          }
        </div>)
      }
 </Slider>

谁能告诉我，为什么它显示 3 列而不是 4 列。

注意：array_groups 数组包含 4 个数组元素。它正在创建第 4 列，但没有显示它。