slideToShow无法呈现指定的列数

Question

我正在使用react-slick来渲染Array中的元素。我的数组长度是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个数组元素。它正在创建第四列，但未显示。