Tengo componentes basados en clases en mi aplicación React. Tengo una casilla de verificación que pasará una cadena y un valor numérico cuando esté marcada.

Mi estado actualmente se ve así:

 state = { checked: [], checkedWeight: 0, };

Y lo que me gustaría lograr es agregar el valor de la cadena pasado a mi handleCheckClick a mi matriz "marcada", así como agregar el valor del peso al total en el peso verificado (y restar el peso y eliminar la cadena de "marcado" cuando no -marcando la casilla).

Todas las variaciones que he probado de esto crean un bucle infinito. Por ejemplo, la siguiente función crea un ciclo infinito en ambos casos.

 handleCheckClick = (name, weight) => { const joined = this.state.checked.concat(name); this.setState({ checked: joined }); this.setState({ checkedWeight: this.state.checkedWeight + weight }); };

La siguiente implementación tampoco parece funcionar:

 handleCheckClick = (name, weight) => { this.setState(prevState => ({ checked: [...prevState.checked, name] })); }

¿Cómo puedo evitar este bucle sin ganchos?