使用React useState Hook实现Show More/Show Less按钮切换列表显示功能

你可以按以下逻辑修改代码，仅用useState就能实现Show Less功能：

核心逻辑说明 #

• 新增loadLess方法，触发时直接将展示条目数重置为初始值4即可回到初始状态
• 优化loadMore逻辑，新增上限判断，避免展示数量超过专辑总条数
• 按钮做条件渲染：当前展示数量小于总专辑数时显示「Show More」，展示数量大于初始值4时显示「Show Less」

完整修改后代码 #

import { useState } from 'react';

// 你的专辑数据定义保持不变即可
const Data = {
  cardData: [
    {
      id: 1,
      img: eight0eightheartbreak,
      title: '808 & Heartbreak',
      desc: 'desc 1'
    },
    {
      id: 2,
      img: collegedropout,
      title: 'College Dropout',
      desc: 'desc 2'
    },
    {
      id: 3,
      img: graduation,
      title: 'Graduation',
      desc: 'desc 3'
    },
    {
      id: 4,
      img: lateregistration,
      title: 'Late Registration',
      desc: 'desc 4'
    },
    {
      id: 5,
      img: MBDTF,
      title: 'My Beatiful Dark Twisted Fantesy',
      desc: 'desc 5'
    },
    {
      id: 6,
      img: TLOP,
      title: 'The Life of Pablo',
      desc: 'desc 6'
    },
    {
      id: 7,
      img: Ye,
      title: 'Ye',
      desc: 'desc 7'
    },
    {
      id: 8,
      img: yeezus,
      title: 'Yeezus',
      desc: 'desc 8'
    },
    {
      id: 9,
      img: JIK,
      title: 'Jesus Is King',
      desc: 'desc 9'
    }
  ]
}

function AlbumCardList() {
  const [noOfElements, setNoOfElements] = useState(4);
  // 原代码中未使用的readMore状态可直接删除
  const totalCount = Data.cardData.length;
  const slice = Data.cardData.slice(0, noOfElements);

  const loadMore = () => {
    // 新增上限判断，最多展示全部专辑，函数式更新避免闭包问题
    setNoOfElements(prev => Math.min(prev + 4, totalCount));
  }

  const loadLess = () => {
    // 直接回到初始展示4条的状态
    setNoOfElements(4);
  }

  return (
    <section className="py-4 container">
      <div className="row justify-content-center">
        {slice.map((item)=>{
          return(
            <div key={item.id} className="col-11 col-md-6 col-lg-3 max-0 mb-4">
              <div className="card p-0 overflow-hidden h-100 shadow">
                <img src={item.img} alt={item.title} className="card-img-top" />
                <div className="card-body">
                  <h5 className="card-title">{item.title}</h5>
                  <p className="card-text">{item.desc}</p>
                </div>
              </div>
            </div>
          )
        })}
      </div>
      <div className="w-100 text-center">
        {/* 没展示完所有专辑时显示Show More */}
        {noOfElements < totalCount && (
          <button className="btn btn-dark me-2" onClick={loadMore} >
            Show More
          </button>
        )}
        {/* 展示数量超过初始值时显示Show Less */}
        {noOfElements > 4 && (
          <button className="btn btn-outline-dark" onClick={loadLess} >
            Show Less
          </button>
        )}
      </div>
    </section>
  )
}

额外优化说明 #

• 给遍历的卡片加上了key={item.id}，避免React列表渲染告警
• 给图片的alt属性补了专辑标题，优化无障碍体验
• 调整了按钮布局，交互更友好

内容的提问来源于stack exchange，提问作者javeria