使用 Hooks 在 react onclick 中循环遍历数组

Question

我有一个从json文件加载的对象数组，我希望在单击按钮时单独加载每个项目。我完成了，但主要问题是当索引超出界限时，它会显示

类型错误"无法读取未定义的属性'内容'"。

如何使索引到达最后一项时再次0索引？我尝试通过在按钮内包含一些 if 语句来解决它，但没有运气。 以下是到目前为止代码的相关部分：

function App() {
const classes = useStyles();
const questions_size = Data.length;
const [num, setNum] = useState(0);
const current = Data[num].content;
(...)
return (
<Container>
<Typography variant="h3" gutterBottom>
About
</Typography>
<Button variant="contained" color="primary" onClick={()=> num<questions_size?setNum(num+1): setNum(0)}>Επομενο</Button>
<Card className={classes.root}>
<CardContent>
<Typography variant="body1" gutterBottom>
<p style={{ fontFamily: 'Tangerine, serif', fontSize: '35px', textShadow: '4px 4px 4px #aaa'}}>{current}</p>
</Typography>
</CardContent>
</Card>
</Container>
)

Answer 1

您当前方法的问题是最高有效索引是questions_size - 1，它应该像这样工作：

onClick={() => num < questions_size - 1 ? setNum(num + 1) : setNum(0)}

另一种选择是使用余数运算符：

onClick={() => setNum(num + 1 % questions_size)}

Answer 2

此代码仅在数据更改时运行。

useEffect(() => {
if (num > Data.length) {
setNum(0)
}
},[Data])