在GatsbyJS（React）中如何实现点击按钮切换卡片内下一个数组项

你需要用状态变量记录当前展示的分类索引，点击按钮时更新这个索引即可实现切换效果，不需要再用slice+遍历整个数组的方式渲染，直接取对应下标的分类渲染即可，性能更高。

完整修改后的代码 #

// 首先在组件顶层引入useState（如果已经引入可以跳过）
import { useState } from 'react';
import Link from '你的路由库对应引入路径';

function 你的组件名称() {
  // 声明状态：当前展示的分类索引，默认从0开始对应第一个分类
  const [currentTypeIndex, setCurrentTypeIndex] = useState(0);
  const totalTypes = carsTypes.length;

  // 下一个分类的点击处理逻辑
  const handleNextType = () => {
    // 边界处理：如果已经是最后一个分类，这里写的是循环回到第一个的逻辑
    setCurrentTypeIndex(prev => prev === totalTypes - 1 ? 0 : prev + 1);
    // 如果不需要循环，到最后一个就停止切换，可以换成下面的写法
    // setCurrentTypeIndex(prev => Math.min(prev + 1, totalTypes - 1));
  };

  // 直接取出当前要展示的分类，不需要遍历整个数组
  const currentCarType = carsTypes[currentTypeIndex];

  return (
    <div className="card-div">
      <div>
        <div className="car-type-title">   
          <h6>{currentCarType.title}</h6>
          {/* 分页计数直接基于状态计算即可 */}
          <p>{currentTypeIndex + 1} / {totalTypes}</p>
          <button type="button" onClick={handleNextType}>下一个汽车分类</button>
        </div>

        {/* 渲染当前分类下的所有品牌 */}
        {strapi[currentCarType.id].map((cars, i) => {
          const brand = cars.brand;
          return (
            <p className="cars-card-type" key={i}>
              <Link
                to={currentCarType.getPath(brand)}
                className="btn-nav rounded-3"
              >
                {brand}
              </Link>
            </p>   
          );
        })}
      </div>
    </div>
  );
}

关键修改说明 #

• 用useState保存当前展示的分类下标，所有和位置相关的计算（分页计数、当前展示内容）都基于这个状态生成，避免了遍历整个数组做计算的性能损耗
• 按钮绑定onClick事件触发状态更新，React会自动监听状态变化重新渲染组件，实现分页数字和卡片内容的同步更新
• 代码中已经内置边界处理逻辑，避免索引超出数组长度报错，你可以根据业务需求选择循环切换或者到最后一页停止切换的方案

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