通过使用按钮设置状态来循环遍历数组中的对象 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。在处理程序中，在每次单击时将 1 添加到 index，并圈出名称从长度中获取余数。只要index 等于数组的长度，余数就是0。

注意：向后循环需要 mod() 函数，因为余数运算符 (%) 不适用于负数。取自answer。

const { useState, useCallback } = React;

const mod = (n, m) => ((n % m) + m) % m;

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

  const forwards = useCallback(() => 
    setIndex(state => mod(state + 1, names.length))
  , [setIndex, names]);
  
  const backwards = useCallback(() => 
    setIndex(state => mod(state - 1, names.length))
  , [setIndex, names]);

  return (
    <div className="App">
      <h1>{names[index].name}</h1>
      <button onClick={backwards}>Backwards</button>
      <button onClick={forwards}>Forwards</button>
    </div>
  );
}

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

const rootElement = document.getElementById("root");
ReactDOM.render(<App {...data} />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>