在反应式onclick中使用Hooks循环数组。

Question

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

TypeError "Cannot read property 'content' of undefined"。

我怎样才能使该索引成为 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])