根据数字的值更改按钮上的文本-使用挂钩进行反应

Question

我有一个计数器，它是数组的索引，在每个按钮上单击时，将显示下一个元素。我想要实现的是我希望在开始处显示特定文本，并且当索引再次变为0时在数字之间显示不同的文本。到现在为止，这是我的代码，文本保持不变，但是我不确定出什么问题。

function App() {


const questions_size = Data.length; 
  const [num, setNum] = useState(0);
  const current = Data[num].content;

  const [buttonText, setButtonText] = useState("Παιξε");
  const change_text = (text) => setButtonText(text);

  const callTwoFunc = () => {
    setNum(num + 1);
    setButtonText("Επομενο");
  }

  return (

  <div style={{ display: 'flex' }}>

          <Button variant="contained" color="primary" onClick={() => {  num < questions_size - 1 ? callTwoFunc() : setNum(0); change_text("Παιξε"); }}>{buttonText}</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>



  </div>


  );
}

export default App;

[现在仅说“Παίξε”，但是我希望它在我第一次单击后变成“Επόμενο”，然后当num变为零时再次变成“Παίξε”。

Answer 1

通过这样做

num < questions_size - 1 ? callTwoFunc() : setNum(0); change_text("Παιξε");

操作符实际上在其之后像num < questions_size - 1 ? callTwoFunc() : setNum(0);一样运行，无论如何change_text("Παιξε");都会运行。将操作符更改为标准的if语法，以便在每种情况下都有一个块，而不是一个表达式

---

       if (num < questions_size - 1) callTwoFunc()
       else { setNum(0); change_text("Παιξε"); }