加载更多功能和响应性问题

Question

我在通过单击“加载更多”按钮加载的对象数组中的渲染项目的响应性方面遇到问题。 每次点击都会显示 3 个额外的项目。 到目前为止，一切都很好。 但是当屏幕宽度变小时，我想每次点击只渲染两个项目，最后只渲染一个项目。 问题在于组件中的媒体查询、css-grid 或 flex-box 以及加载功能预设会相互抵消。 如果我想要呈现两个项目，我必须调整 CSS 规则和实际的 JS 代码预设，如每页帖子。 换句话说，如何在反应（钩子）中创建响应式“加载更多”功能。

组件

const [ soldProperties, setSoldProperties ] = useState([])
const [ loadBtn, setLoadBtn ] = useState('Show More')
const [ currentSlice, setCurrentSlice ] = useState(3)
const [ perPage, setPerPage ] = useState(3)

useEffect(()=> {
   setSoldProperties(soldProps.slice(0, currentSlice))
}, [currentSlice, soldProperties.length])

const loadMore = () => {
       setCurrentSlice(currentSlice + perPage)
    if (soldProperties.length === 6) {     
           setLoadBtn('Show Less')
       }
       if (soldProperties.length === soldProps.length){
       setCurrentSlice(currentSlice - 6)
       setLoadBtn('Show More')
   }
}

return (
    <div className="soldprops">
        <div className="soldprops_header">Sold Properties:</div>
        <div className="soldprops_grid">
            {soldProperties && soldProperties.map(property => {
                const { img, name, price, id } = property
                return <div className="soldprops_grid_imageBox" key={id}>
                    <div className="image"><img src={process.env.PUBLIC_URL + `/soldProps/${img}`} alt="" style={{ width: '100%', height: 'auto' }} /></div>
                    <div className="footer"><span className="soldChateau">{name}</span><span className="soldPrice">${price},-</span></div>
                </div>
            })}
        </div>
        <button type="button" className="loadmoreBtn" onClick={loadMore} >{loadBtn}</button>
    </div>
)

}

scss

.soldprops {
position: relative;
max-width: 1920px;
margin: 0 auto;
height: auto;
@include center-content-column;


    &_header {
        width: 100%;
        height: 50px;
        color:rgb(163, 149, 184);
        padding: 0 20px;
        font-size: 1.2rem;
        font-family: Arial, Helvetica, sans-serif;
        @include center-content-row-start;
    }

    &_grid {
        width: 100%;
        padding: 0 20px;
        margin-bottom: 50px;
        height: auto;
        @include center-content-row;
        flex-wrap: wrap;
        gap: 15px;
        // display: grid;
        // grid-template-columns: repeat(3, 1fr);
        // grid-template-rows: repeat(1, 1fr);
        // gap: 20px;
      
        &_imageBox {
            position: relative;
            width:32%;
            height: auto;
            line-height: 0;
            box-shadow: 0px 4px 4px rgb(11, 9, 14);

            .image {
            width: 100%;
            height: auto;
            opacity: 1;
           }
     }
 }