通过使用按钮 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>
  );
}

代码沙盒

Answer 1

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

注意：mod()反向循环需要该函数，因为余数运算符 ( %) 不适用于负数。它取自这个答案。

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>