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

Question

所以我有一些数据想循环显示：

const data = {
  names: [
    {
      name: "Jordan"
      // additional data
    },
    {
      name: "Holly"
      // additional data
    },
    {
      name: "Sean"
      // additional data
    }
  ]
};

使用useState钩子，我从索引0开始数据：

const [index, setIndex] = useState(data.names[0]);

如何使用状态循环遍历数组中的对象？我已经创建了一个调用handleClick的按钮，如何通过数组+1？

function App() {
  const [index, setIndex] = useState(data.names[0]);

  function handleClick() {
    setIndex(); // Help!
  }

  return (
    <div className="App">
      <h1>{index.name}</h1>
      <button onClick={handleClick}>Change name</button>
    </div>
  );
}

CodeSandBox

Answer 1

不要将数组中的元素设置为状态。而是使用当前的index。在处理程序中，每次单击时在index上加1，然后圈出名称，从长度中减去余数。每当index等于数组的长度时，余数将为0。