Tengo una aplicación ReactJS en la que un buttonA ejecuta una función onClick y esa función tiene un bucle for dentro. Quiero romper ese bucle for onclick de otra función. la visibilidad de los dos botones se controla mediante estados. cada vez que hagamos clic en tirar dados btn, se ocultará y mostrará detener apuesta btn y detener apuesta btn debe hacer clic en detener la ejecución de la función runbets que se declara en onclick de Tirar dados. Quiero la misma funcionalidad que Primedice.com.
const [stopBet, setStopBet] = useState(false);// this is the state declaration for reference <button type="button" className={`text-md font-bold bg-btn1 text-white px-28 py-3 rounded ${ disableClick && "hidden" }`} id="rollBtn" onClick={() => { const runBets = () => { for (let i = 0; i < 10; i++) { if (stopBet) { console.log("enable click"); document .getElementById("rollBtn") .removeAttribute("disabled"); setDisableClick(false); setStopBet(false); break; } } }; // To prevent spamming of bets setDisableClick(true); console.log("disable click"); document .getElementById("rollBtn") .setAttribute("disabled", "true"); runBets(); }}> Roll Dice </button> <button type="button" className={`text-md font-bold bg-btn1 text-white px-28 py-3 rounded ${ !disableClick && "hidden" }`} id="rollBtn" onClick={() => { setStopBet(() => { console.log("stop bet"); return true; }); }}> Stop Bet </button>Aquí hay un problema si usa useState , hay un retraso cuando los estados se actualizan y el componente se vuelve a renderizar. Mientras tanto, el ciclo puede continuar, lo cual no desea.
Le sugiero que pruebe esto con useRef , no volverá a renderizar todo el componente y hará su trabajo.
const bool = useRef(false); // Replace the useState line with this. onClick(() => bool.current = true); // Replace the stop logic with this. if (bool.current) // Replace the if condition with this. break;También sugiero que, para algunas preguntas, clones lo que quieras en la zona de pruebas, de modo que sea más fácil ver realmente lo que quieres o lo que sucede en la interfaz de usuario.
Creo que debería usar useMemo en lugar de useState aquí, ya que no desea cambiar los datos mientras el componente se vuelve a procesar