React数组分页展示问题求助：点击切换始终显示3个元素

给定数组 [21, 42, 54, 1, 87, 90, 56, 27, 89]，需求如下：

• 默认展示前3个元素
• 点击next按钮向后偏移一位，显示42, 54, 1
• 点击previous按钮向前偏移一位，显示21, 42, 54

尝试通过修改起始索引实现功能但遇到问题，以下是我的React代码：

import React from "react";
import { useState } from "react";
const App = () => {
  const list = [21, 42, 54, 1, 87, 90, 56, 27, 89];

  var start = 0;

  const handleClick = () => {
    start = start + 1;
  };

  var n = 3;

  var items = list.slice(start, n).map((i) => {
    return (
      <button style={{ margin: 10 }} type="button" class="btn btn-primary">
        {i}
      </button>
    );
  });

  return (
    <div>
      <div onClick={handleClick}>Click</div>
      <div>{items}</div>
    </div>
  );
};

export default App;

错误分析 #

• 未用React状态管理起始索引：用var声明的start是普通变量，修改后不会触发组件重新渲染，点击按钮后界面无更新。
• slice方法参数错误：list.slice(start, n)的结束索引固定为3，偏移后无法正确截取连续3个元素，应改为start + n作为结束索引。
• 缺少previous按钮逻辑：仅实现了向后偏移的点击事件，无向前偏移的处理。
• React元素类名错误：React中DOM元素类名需用className属性，而非class。
• 未处理边界情况：未限制start的取值范围，当start小于0或大于list.length - 3时，会出现元素数量不足的问题。

修正后的代码 #

import React from "react";
import { useState } from "react";

const App = () => {
  const list = [21, 42, 54, 1, 87, 90, 56, 27, 89];
  const [start, setStart] = useState(0);
  const showCount = 3;

  // 处理next按钮点击，限制start最大值为数组长度 - 展示数量
  const handleNext = () => {
    if (start < list.length - showCount) {
      setStart(prev => prev + 1);
    }
  };

  // 处理previous按钮点击，限制start最小值为0
  const handlePrev = () => {
    if (start > 0) {
      setStart(prev => prev - 1);
    }
  };

  // 正确截取数组元素
  const items = list.slice(start, start + showCount).map((num, index) => (
    <button 
      key={index}
      style={{ margin: 10 }} 
      type="button" 
      className="btn btn-primary"
    >
      {num}
    </button>
  ));

  return (
    <div>
      <button onClick={handlePrev} disabled={start === 0}>Previous</button>
      <button onClick={handleNext} disabled={start === list.length - showCount} style={{marginLeft: 10}}>Next</button>
      <div style={{marginTop: 20}}>{items}</div>
    </div>
  );
};

export default App;

修正说明 #

1. 用useState声明start状态，通过setStart修改状态触发组件重新渲染。
2. 调整slice参数为slice(start, start + showCount)，确保每次截取连续3个元素。
3. 添加handlePrev函数处理向前偏移逻辑，通过条件判断限制start边界，给按钮添加disabled属性避免无效点击。
4. 将class替换为className，符合React语法规范。
5. 给映射的按钮添加key属性，满足React列表渲染要求。

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