Solución:
El problema se puede encontrar en su onClick apuntalar:
<button className="previous-round" onClick={setOrderData_(previous(orderData_))}>‹</button>
^
Todo lo que se encuentra entre las llaves se evalúa de inmediato. Esto hace que el setOrderData_ función que se llamará en cada bucle de renderizado.
Al envolver la función con una función de flecha, el código evaluado dará como resultado una función que se puede llamar cada vez que el usuario hace clic en el botón.
<button className="previous-round" onClick={() => setOrderData_(previous(orderData_))}
>‹</button>
Puede encontrar más información sobre JSX y expresiones en los documentos oficiales https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx
Bucle de renderizado infinito
La razón del bucle infinito es porque algo (muy probablemente setState) en el caso de que la devolución de llamada provoque una repetición. Esto llamará nuevamente a la devolución de llamada del evento y hará que React se detenga y arroje el mensaje ‘Demasiadas repeticiones de renderización’. error.
Explicación técnica
Para comprender mejor la razón por la que JSX funciona de esta manera, consulte el código a continuación. JSX en realidad se está compilando en Javascript y cada prop se pasará a una función en un objeto. Con este conocimiento, verá que handleEvent() se llama inmediatamente en el último ejemplo.
// Simple example
// JSX: <button>click me</button>
// JS: createElement('button', { children: 'click me' })
createElement("button", { children: "click me" });
// Correct event callback
// JSX: <button onClick={handleClick}>click me</button>
// JS: createElement('button', { onClick: handleClick, children: 'click me' })
createElement("button", { onClick: handleClick, children: "click me" });
// Wrong event callback
// JSX: <button onClick={handleClick()}>click me</button>
// JS: createElement('button', { onClick: handleClick(), children: 'click me' })
createElement("button", { onClick: handleClick(), children: "click me" });
Simplemente reemplace su botón con el de abajo
<button className="previous-round" onClick={() => setOrderData_(previous(orderData_))}>‹</button>
Esto sucede porque la función onClick, si se usa sin funciones anónimas, se llama inmediatamente y setOrderData vuelve a renderizarla, lo que provoca un bucle infinito. Entonces es mejor usar funciones anónimas.
Espero eso ayude. siéntete libre de dudas.
Cuando revisé tu código, encontré algo.
La función de hacer clic debe ser una función de flecha. Onclick es un evento y solo está llamando a una función dentro de onclick directamente. Esto conduce a demasiadas re-renderizaciones porque está configurando el estado directamente dentro de la devolución. Eso no funciona.
Llamar a setState aquí hace que su componente sea un competidor para producir bucles infinitos. render debe permanecer puro y usarse para cambiar condicionalmente entre fragmentos JSX / componentes secundarios según el estado o los accesorios. Las devoluciones de llamada en el renderizado se pueden usar para actualizar el estado y luego volver a renderizar según el cambio Esta línea anterior tomada del enlace aquí: https://itnext.io/react-setstate-usage-and-gotchas-ac10b4e03d60