React.js线性遍历索引实现3轮3x3网格图片展示需求

核心思路 #

• 用状态变量持久化当前轮次索引，每轮切换时自动累加，自然衔接上一轮计数
• 按轮次索引计算目标图和非目标图的区间：
  • 目标图：target_images[currentRound]
  • 非目标图：每轮取8张，区间为[currentRound * 8, currentRound * 8 + 8)（利用数组slice方法截取）
• 合并目标图和非目标图后，可按需打乱顺序生成3x3网格

代码实现示例 #

import { useState } from 'react';

// 自定义打乱数组函数（用于随机排列网格中的图片位置）
const shuffle = (array) => {
  const newArr = [...array];
  for (let i = newArr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
  }
  return newArr;
};

const ImageGrid = ({ target_images, non_target_images }) => {
  // 状态保存当前轮次索引，从0开始
  const [currentRound, setCurrentRound] = useState(0);

  // 计算当前轮可用的最大轮次（避免数组越界）
  const maxAvailableRound = Math.min(
    target_images.length,
    Math.floor(non_target_images.length / 8)
  );

  // 获取当前轮的目标图和非目标图
  const currentTarget = target_images[currentRound];
  const currentNonTargets = non_target_images.slice(
    currentRound * 8,
    currentRound * 8 + 8
  );

  // 合并并打乱生成网格图片数组
  const gridImages = shuffle([currentTarget, ...currentNonTargets]);

  // 切换到下一轮的函数
  const handleNextRound = () => {
    if (currentRound < maxAvailableRound - 1) {
      setCurrentRound(prev => prev + 1);
    } else {
      // 轮次耗尽后的处理：重置或提示
      alert('所有轮次已完成，将重置到第一轮');
      setCurrentRound(0);
    }
  };

  return (
    <div>
      {/* 3x3网格渲染 */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: '12px',
        marginBottom: '20px'
      }}>
        {gridImages.map((imgSrc, idx) => (
          <img
            key={idx}
            src={imgSrc}
            alt={`grid-item-${idx}`}
            style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
          />
        ))}
      </div>
      {/* 切换轮次按钮 */}
      <button onClick={handleNextRound} disabled={maxAvailableRound === 0}>
        {currentRound < maxAvailableRound - 1 ? '下一轮' : '重置轮次'}
      </button>
    </div>
  );
};

export default ImageGrid;

关键细节说明 #

• 轮次衔接：currentRound作为状态变量，每次切换轮次时通过setCurrentRound(prev => prev + 1)累加，自动保留上一轮的计数状态，无需额外手动维护计数器
• 数组越界防护：通过maxAvailableRound计算可执行的最大轮次，确保不会取到target_images或non_target_images之外的元素
• 打乱逻辑：如果不需要随机排列网格中目标图的位置，可以去掉shuffle函数，直接固定目标图的位置（比如放在第一个位置）

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