Question

希望您可以帮助解决此问题：

我一直在努力寻找如何清除反应间隔的方法，每次运行代码时都会出错，说有很多重新渲染，我已经在google中尝试了很长时间了。清除间隔函数在反应中，但我只是找不到适合我的工作方式，如果条件我想调用清除间隔

if(verification.length===6){
      setSpinner()
        console.log('works')
  }

我希望这足以使我做出反应来接受我的肮脏代码。

这是其余的代码：

import "./PaymentPage.scss";
import Spinner from "../../components/Spinner/Spinner";

export default function PaymentPage() {
    const [status, setStatus] = useState(false);
    const [alert, setAlert] = useState(true);
    const [spinner, setSpinner] = useState(true);
    const [verification, setVerification] = useState("");
    
  
  if(verification.length===6){
   
      setSpinner()
        console.log('works')
  }
    

const verifier=(e)=>{
    e.preventDefault();
    
   
    if(number.length>=16 && name!=='' && expiry!=='' && cvc.length>=3){
        setStatus(true)
        console.log('alert',status)
        setInterval(print,500);**//if the condition above is accomplished i call the interval.**
       
    }else{
        setAlert(false)
        console.log('alert',alert)
    }

}
const print=()=>{

    setVerification(verification=> verification+".");**//it will add a '.' on every iteration**

}


useEffect(() => {
     
    console.log('cc details', number,name,expiry,cvc,expiry)
   

}, [status])

预先谢谢大家，对我可能很愚蠢的问题表示歉意

Answer 1

应该使用useEffect，否则一旦verify.length === 6为true，它将继续呈现。当verify.length变为6时，它将仅呈现一次。

useEffect(() => {
     
  if(verification.length===6){

      setSpinner()   

    }
}, [verification])

对许多重新渲染错误做出反应，如何避免

1 个答案: