Reactjs slideToShow未呈现指定数量的列

我正在使用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>

const设置={
箭头：错，
无限：是的，
速度:500,，
幻灯片放映：4，
幻灯片滚动：4，
响应：[
{
断点：1024，
设置：{
幻灯片放映：4，
幻灯片滚动：4
}
},
{
断点：780，
设置：{
幻灯片放映：2，
幻灯片滚动：2
}
},
{
断点：480，
设置：{
幻灯片放映：1，
幻灯片滚动：1
}
}
]
};
this.slider=slider}>
{
数组\组.map（（项，索引）=>
{
item.map（（子项，子索引）=>
{子项.title}
)
}
)
}

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

注意：数组\组数组包含4个数组元素。它正在创建第四列，但未显示该列。