通过后端接口得到数据 一页显示n个设置左右滑动效果

import React, { useEffect, useState } from 'react';
import { Image, Tooltip } from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';
import './index.less';

function Solution(props) {
  const { data } = props;
  const [groupCount, setGroupCount] = useState(1);
  const [activeCount, setActiveCount] = useState(1);
  const IconFont = createFromIconfontCN({
    scriptUrl: [
      '//...',
    ],
  });
  const onClickLeft = () => {
    document.getElementById('solution_doc_box').style.left = `-${(activeCount - 2) * 1176}px`;
    setActiveCount(activeCount - 1);
  };
  const onClickRight = () => {
    document.getElementById('solution_doc_box').style.left = `-${activeCount * 1176}px`;
    setActiveCount(activeCount + 1);
  };
  const spArr = (arr, num) => {
    const newArr = [];
    for (let i = 0; i < arr.length;) {
      newArr.push(arr.slice(i, i += num));
    }
    return newArr;
  };

  useEffect(() => {
    console.log(spArr(data, 6)?.length);
    setGroupCount(spArr(data, 6)?.length);
  }, [data, setGroupCount]);

  useEffect(() => {
    const box = document.getElementById('solution_doc_box').offsetHeight;
    document.getElementById('solution_doc_container').style.height = `${box}px`;
  }, []);
  return (
    <div className="solution_container">
      <div className="solution_container_center">
        {groupCount > 1 && activeCount !== 1 &&
          <div className="solution_doc_slide_left" onClick={() => onClickLeft()}>
            <IconFont style={{ color: 'rgba(23,26,29,0.4)', fontSize: '28px', height: '28px' }} type="icon-smallleft-line" />
          </div>}
        {groupCount > 1 && activeCount !== groupCount &&
          <div className="solution_doc_slide_right" onClick={() => onClickRight()}>
            <IconFont style={{ color: 'rgba(23,26,29,0.4)', fontSize: '28px', height: '28px' }} type="icon-smallright-line" />
          </div>}
        <div className="solution_title">解决方案</div>
        <div className="solution_doc_center" id="solution_doc_container">
          <div className="solution_doc_slide" id="solution_doc_box">
            {spArr(data, 6)?.map((item, index) => {
              return (
                <div className="solution_doc_slide_item" key={index}>
                  {item?.map((_item) => {
                    return (
                      <div className="solution_doc_slide_item_item" key={_item?.code}>
                        <Image
                          width={45}
                          src={_item?.picture?.downloadUrl}
                        />
                        <div className="solution_doc_slide_item_item_title">{_item?.name}</div>
                        <Tooltip title={_item?.description}>
                          <div className="solution_doc_slide_item_item_description">{_item?.description}</div>
                        </Tooltip>
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Solution;

.solution_container{
  width: 100%;
  background-color: #FFF;
  .solution_container_center{
    width: 1440px;
    margin: 0 auto;
    padding-top: 80px;
    position: relative;
    .solution_doc_slide_left{
      position: absolute;
      width: 36px;
      height: 36px;
      border-radius: 18px;
      background-color: #fff;
      top: 410px;
      left: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 2px 20px 0 rgba(159,177,200,0.20);
    }
    .solution_doc_slide_right{
      position: absolute;
      width: 36px;
      height: 36px;
      border-radius: 18px;
      background-color: #fff;
      top: 410px;
      right: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 2px 20px 0 rgba(159,177,200,0.20);
    }
    .solution_title{
      font-weight: 600;
      font-size: 32px;
      color: #171A1D;
      text-align: center;
      line-height: 38px;
    }
    .solution_doc_center{
      width: 1176px;
      // height: 272px;
      overflow: hidden;
      margin: 20px auto 76px;
      position: relative;
      .solution_doc_slide{
        position: absolute;
        display: flex;
        transition: 0.5s;
        padding: 12px;
        left: 0;
        .solution_doc_slide_item{
          width: 1176px;
          display: flex;
          flex-wrap: wrap;
          .solution_doc_slide_item_item{
            width: 360px;
            height: 254px;
            padding: 34px 32px 0;
            border-radius: 8px;
            box-shadow: 0 2px 20px 0 rgba(159,177,200,0.2);
            margin: 12px;
            .solution_doc_slide_item_item_title{
              font-size: 20px;
              color: #171a1d;
              line-height: 28px;
              font-weight: 600;
              margin: 26px 0 12px;
            }
            .solution_doc_slide_item_item_description{
              font-size: 16px;
              color: rgba(23,26,29,0.6);
              line-height: 26px;
              word-break: break-all;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
  }
}