如何打破 onClick ReactJS 的循环

Question

我有一个使用async await() 做一些动画的函数。 我想播放/暂停动画onClick。我使用useState 来更新变量，但函数的行为不符合我的要求。 const print () 正在运行并且当我单击按钮时，文本会更新，但该功能不会中断。在日志中，“play”被打印了 100 次。我猜useState 和async 造成了一些问题。我该如何解决这个问题？

const Test= props => {

    const [ButtonText, SetButtonText] = useState("Play");
    const ToggleButtonText = () => {
        if(ButtonText == "Play")          
            SetButtonText("Pause")

        if(ButtonText == "Pause")
            SetButtonText("Play")
    }

    const delay = ms => new Promise(res => setTimeout(res, ms));

    const print= () => {
        for(var i = 0; i < 100; i++)        
        {
            ///
               work
               await delay(1000);
               work
            ///
           console.log(ButtonText);
           
           if(ButtonText == "Pause")
               break ; 

        }
    };
    return (
           <div>
              <div>
                   ///work component///
              </div>
            <button onClick = {() => ToggleButtonText()}> {ButtonText}</button>
           </div>
    )
}

Answer 1

ButtonText 被声明为 const - 它不能在函数组件的给定调用中更改其值。

如果没有更多信息，我会使用 ref 和 state，以便循环可以查看 ref 是否被更改：

const buttonTextRef = useRef();
// Update the ref to ButtonText every time ButtonText changes:
useEffect(() => {
  buttonTextRef.current = ButtonText;
}, [ButtonText]);

if (buttonTextRef.current === 'Pause') {
  break;
}

另一种方法是将被迭代的索引放入状态，而不是循环 100 次，而是重新渲染 100 次，例如，类似于以下内容：

const [printI, setPrintI] = useState(0);
if (printI) {
  // Then we're in the middle of iterating
  // work
  if (printI < 100) {
    setTimeout(() => {
      setPrintI(printI + 1);
    }, 1000);
  } else {
    setPrintI(0);
  }
};

要停止它，请致电setPrintI(0)。