所以我有一些想要循环浏览的数据：
const data = {
names: [
{
name: "Jordan"
// additional data
},
{
name: "Holly"
// additional data
},
{
name: "Sean"
// additional data
}
]
};
Using 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>
);
}
代码沙盒 https://codesandbox.io/s/happy-black-qj5w6
不要将数组中的元素设置为状态。而是使用当前的index。在处理程序中添加 1index每次单击，并圈出名称，即可得到长度的余数。每当index等于数组长度，余数为 0。
注：mod()向后循环需要函数，因为余数运算符 (%) 不适用于负数。是从这个摘下来的answer https://stackoverflow.com/a/17323608/5157454.
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
