通过使用按钮React设置状态来循环数组中的对象

import React, { useState } from 'react';

function Example() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const data = [
    { id: 1, name: 'Object 1' },
    { id: 2, name: 'Object 2' },
    { id: 3, name: 'Object 3' },
    // 更多对象...
  ];

  const currentObject = data[currentIndex];

  const handleNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % data.length);
  };

  return (
    <div>
      <h1>{currentObject.name}</h1>
      <button onClick={handleNext}>Next</button>
    </div>
  );
}

export default Example;