Como parte del proyecto que estoy desarrollando con React, estoy tratando de mostrar el estado de un botón de opción al hacer referencia a las identificaciones de dos listas de objetos para hacer coincidir el patrón y devolver un valor booleano, que luego se asigna a dicha Radio. botón. Creo que la limitación aquí es mi conocimiento de JavaScript ya que, por lo que puedo decir, la lógica sigue. Por contexto, las listas que se comparan son una lista de todas las posibles aplicaciones que puede tener un usuario y luego la lista de aplicaciones que tiene un usuario. Mi objetivo es representar el estado de un botón de opción en función de los que coinciden. A continuación se muestran algunos fragmentos de código de la ejecución.
{applications.map((app: Application) => ( <FormControlLabel key={app.id} control={ <Radio checked={userHasApplicationCheck(app.id)} onClick={handleRadioChange} value="a" name="radio-buttons" inputProps={{ 'aria-label': app.id }} />} label={app.id} /> ))}La función de JavaScript a la que hace referencia al evaluar si un botón de opción debe marcarse o no.
Nota: props es un objeto de usuario que tiene una lista de aplicaciones propias a las que hace referencia props.applications
function userHasApplicationCheck(id: string) { props.applications.forEach((app: Application) => { if (app.id === id) { console.log(`User has this app: ${app.id}`); return true } else { return false } }) return false }El problema que tengo es que ninguno de mis botones de radio se marca en absoluto, a pesar de que las declaraciones de registro de mi consola confirman el estado correctamente en la terminal. Es probable que haya hecho algo tonto sintácticamente, pero no puedo verlo.
Solución
Gracias al comentario de @Rithick, ahora sé que devolver un valor booleano dentro de un bucle For Each no sale del bucle. Como tal, modifiqué mi enfoque a lo siguiente:
function userHasApplicationCheck(id: string) { let found = false; props.user.applications.forEach((app: Application) => { if (app.id == id){ found=true; } }) return found; }Desde entonces, he probado esto y puedo confirmar que está funcionando.
La declaración de retorno dentro del método forEach no finaliza esa función porque aquí pasamos cada elemento a una función de devolución de llamada. Entonces esa función de devolución de llamada no devuelve el método forEach. Entonces continúa llamando a esa función de devolución de llamada para el resto de los elementos de la matriz. Es por eso que su función después de completar ese método forEach va a la última declaración y devuelve falso. Solución: en lugar del método forEach, prefiera usar el bucle regular for..of & for..in cuando desee terminar un bucle en el medio.