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